多级静态路由架构 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 and/or /complex-route/:all ComplexComponent 将成为 ComplexeComponentAll 将在其中呈现的包装器组件。

但是 ComplexComponentAll 要么不渲染要么渲染两次（取决于我对路由的判断）。

Answer 1

问题是 named-parameter 路由 /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,
}

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

多级静态路由架构 react router v4

Multilevel static route architecture react router v4

javascript

config

reactjs

react-router