React Router v4 - динамическая настройка с измененным маршрутом по умолчанию

Question

Сейчас я работаю с React router v4, и я хочу, чтобы в отдельном объекте была конфигурация маршрута, поэтому я проследил за документацией и сделал что-то подобное (см. Код ниже)

Я хочу добиться этого потока: когда пользователь переходит к модулю Customer, например, "/customer", он должен отобразить компонент Overview, после этого я перехожу по маршруту "/customer/cards", там должен быть только компонент Cards. (Обзорный компонент должен исчезнуть). Но я не могу понять, как я могу это сделать.

Я нашел только один способ, как этого добиться (просто добавив отдельные маршруты для обзора и карт. Например, / клиент / обзор и / клиент / карты.

Но я не хочу иметь это решение, потому что хочу рендерить обзор именно тогда, когда пользователь заходит в "/customer".

Может кто-нибудь помочь мне советом? Я буду очень уместным.

Вот демоверсия с минимальной рабочей схемой: Минимальная рабочая демоверсия выпуска

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

Рабочий кодекс