多级静态路由架构反应路由器 v4答案

【问题标题】：Multilevel static route architecture react router v4多级静态路由架构反应路由器 v4
【发布时间】：2018-03-09 21:37:31
【问题描述】：

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

我对 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 要么不渲染，要么渲染两次（取决于我对路线的了解）。

【问题讨论】：

不完全确定确切的问题是什么，因为ComplexComponentAll 不在routes 中，但一个问题是在'/complex-route/tab-1' 和'/complex-route/tab-2' 之前有'/complex-route/:all'，这将阻止后者两个从显示。也许tab-1 和tab-2 应该是routes 的孩子:all？
ComplexComponentAll 是一个错字，因为我更改了组件的名称。我想要的是能够首先通过/complex-route 或/complex-route/:all 访问“所有页面”，然后能够访问tab-1 和tab-2，简而言之，我想通过@987654339 访问ComplexComponentTabAll @或/all。是不是更清楚一点？
可能'/complex-route/(all)?' 和exact: true 是你想要的，因为它只匹配/complex-route 和/complex-route/all。不要使用:all，因为它总是匹配的。
你是明星，我认为这是有效的，这是错误的正则表达式路径，也是你在第二篇文章中所说的路线位置。如果您回答这个问题，我将非常乐意验证您的答案！非常感谢！
当然，很高兴为您提供帮助！我在答案部分做了一个简短的总结。

标签： javascript reactjs react-router config

【解决方案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,
}

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

【讨论】：