React Router v4 - 具有更改的默认路由的动态配置

时间:2018-02-28 11:30:50

标签: reactjs react-router-v4 react-router-dom react-router-component

我现在正在使用React路由器v4,我希望在一个单独的对象中有一个route-config,所以我按照文档的说法做了类似的事情(见下面的代码)

我想实现这个流程:当用户移动到客户模块,例如“/ customer”时,应该呈现一个Overview组件,之后,我移动路径“ / customer / cards“ 只有a卡组件应该在那里(概述组件应该消失)。但我无法弄清楚我是怎么做到的。

我发现只有一种方法可以实现它(只需添加概述和卡片的分隔路线。例如 / customer / overview / customer / cards

但我不想拥有这个解决方案,因为我想在用户访问“/ customer”时准确呈现概述。

有人可以帮我提一些建议吗?我会非常合适的。

以下是具有最小工作方案的演示:Minimal working demo of the issue

const routes: any = [
    {
        path : "/",
        component : AsHm,
        exact : true
    },
    {
        path : "/about",
        component : AsAb,
        exact : true
    },

    {
        path : "/customer",
        component : AsCus,
        routes : [
            {
                path : "",
                component : AsOver,
                exact: true
            },
            {
                path : "/customer/cards",
                component : AsCards,
                exact: true
            }
        ]
    }
];

1 个答案:

答案 0 :(得分:2)

没有路径的路线将始终匹配,无论您是否指定了精确属性,因此

{
     path : "",
     component : AsOver,
     exact: true
},

始终匹配,即使路线为/customer/cards

您可以做些什么来避免它,是使用Switch并在/customer/cards之后使用此路由。 Switch将呈现第一个匹配的路线,因此如果带有path=""的路线呈现

,则customer/cards的路线不会被渲染

所以你的路线看起来像

const routes: any = [
    {
        path : "/",
        component : Home,
        exact : true
    },
    {
        path : "/about",
        component : About,
        exact : true
    },
    {
        path : "/customer",
        component : Customer,
        routes : [
            {
                path : "/customer/cards",
                component : Cards,
                exact: true
            },
            {
                path : "",
                component : Overview,
                exact: true
            },
        ]
    }
];

,您的客户组件将如下所示

const Customer = ({ routes, location })=>(
  <div>
        <h2>Customer Index</h2>
    <Switch>{routes.map((route, i) => <RouteGeneric key={i} {...route} />)}</Switch>
    </div>
)

Working codepen