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

Question

我现在正在使用 React router v4，我想在一个单独的对象中有一个路由配置，所以我按照文档做了类似的事情（见下面的代码）

我想实现这个流程：当用户移动到客户模块时，例如 "/customer" 应该呈现一个 Overview 组件，之后，我移动到route "/customer/cards" 只有 Cards 组件 应该在那里 （Overview 组件应该消失）。但是我不知道我该怎么做。

我只找到了实现它的一种方法（只需为概述和卡片添加单独的路线。例如 /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
            }
        ]
    }
];

Answer 1

没有路径的路由将始终匹配，无论您是否为其指定了确切的属性，因此

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

总是匹配，即使路由是 /customer/cards

你可以做些什么来避免它，就是使用 Switch 并在 /customer/cards 之后有这个 Route。 Switch 将渲染第一个匹配的路由，因此如果带有 customer/cards 的路由呈现

，则带有 path="" 的路由将不会被渲染

所以你的路线看起来像

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
            },
        ]
    }
];

您的 Customer 组件看起来像

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

Working codepen

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

React Router v4 - Dynamic Config with the changed default route

reactjs

react-router-component

react-router-v4

react-router-dom