多级静态路由结构对路由器v4的反应

Question

我正在努力研究多层体系结构，这样我就可以有可能有多条通向同一组件的路径，并且仍然能够到达其他组件。

我对react router (router的静态版本)的理解有点有限，而且由于文档看起来不太透彻，我希望您能帮我。

下面是路由配置：

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>
);

我期待某种类型的tabing体系结构，通过使用/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的语法的更多信息，请查看 docs。