javascript - 多级静态路由架构React Router v4

Question

我正在尝试以一种方式研究多级架构，这种方式允许我可能拥有多个通往同一组件的路线，并且仍然能够到达其他组件。

我对react-router-config(react router v4的静态版本)的理解有点有限，并且由于文档似乎并不详尽，我希望你能帮助我。

这是路由配置:

const routes = [
    {
        component : Root,
        routes    : [
            {
                path      : '/*',
                component : Layout,
                routes    : [
                    {
                        path      : '/',
                        exact     : true,
                        component : ComponentOne,
                    },
                    {
                        path      : '/route-2,
                        exact     : true,
                        component : ComponentTwo,
                    },
                    {
                        path      : '/complex-route',
                        component : ComplexComponent,
                        routes    : [
                            {
                                path      : '/complex-route/:all',
                                component : ComplexComponentTabAll,
                            },
                            {
                                path      : '/complex-route/tab-1',
                                exact     : true,
                                component : ComplexComponentTabOne,
                            },
                            {
                                path      : '/complex-route/tab-2',
                                exact     : true,
                                component : ComplexComponentTabTwo,
                            },
                        ],
                    },
                    {
                        path      : '*',
                        exact     : true,
                        component : NotFound,
                    },
                ],

            },
            {
                path      : '*',
                component : NotFound,
            },
        ],
    },
];

// ============================================================
// Exports
export default routes;

这是组件布局:

const Layout = ({ route }) => (
    <div>
        <Menu />
        <MainBlock>
            <Header>
                {/*some sstuff goes here */}
            </Header>
            <Theatre>
                {renderRoutes(route.routes)}
            </Theatre>
        </MainBlock>
    </div>
);

这是复杂组件的示例

const ComplexeComponent = ({ route }) => (
    <div>
        { renderRoutes(route.routes) }
    </div>
);

const ComplexComponentTabAll = () => (
    <div>
        <p> This is the ComplexComponentTabAll </p>
    </div>
);

我期待某种制表架构，通过使用 /complex-route 和/或 /complex-route/:all ComplexComponent 将成为包装组件，其中ComplexeComponentAll 将被渲染。

但是 ComplexComponentAll 要么不渲染，要么渲染两次(取决于我对路线的跟踪)。

Answer 1

问题是命名参​​数路由 /complex-route/:all (与 /complex-route/ 下面的任何内容匹配)出现在 /complex-route/tab-1 之前和/complex-route/tab-2路线。如react-router-config使用<Switch>在内部，只显示第一个匹配项，其他两条路由永远不会显示。

制作/complex-route/:all最后一个路由可以修复它，但是使用带有正则表达式的精确路由来仅匹配 /complex-route和/complex-route/all是一个更清洁的解决方案:

{
    path      : '/complex-route/(all)?',
    exact     : true,
    component : ComplexComponentTabAll,
}

有关 path 语法的更多信息react-router-config的支柱和react-router ，查看 path-to-regexp docs .