Question

我正在努力研究多级架构，这种方式允许我可能有多条路径通向同一个组件，但仍能够到达其他组件。

我对react-router-config（反应路由器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的{{1}}道具语法的详细信息，请查看path-to-regexp docs。

多级静态路由架构对路由器v4做出反应

1 个答案: