React Router v4 - Dynamic Config with the changed default route

Question

I'm working with the React router v4 now and I want to have a route-config in a separated object, so I followed for the documentation an I did something like this (see code below)

I want to achieve this flow: When an user moves to a Customer module eg "/customer" there is should render an Overview component, after that, I move for the route "/customer/cards" only the a Cards component should be there (the Overview component should disappear). But I can't figure how I can do it.

I have found only one way how to achieve it (just adding the separated routes for the Overview and Cards. Eg /customer/overview and /customer/cards.

But I don't want to have this solution cause I want to render the Overview exactly when the user comes to "/customer".

Can someone help me with some advice? I'll be very appropriate.

Here is the demo with the minimal working scheme : 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
            }
        ]
    }
];

score 2 · Accepted Answer · answered Feb 28 '18 at 12:22

A Route without a path will always match, whether you specify a exact attribute to it or not, and hence

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

always matches, even though the Route is /customer/cards

What you can do to avoid it, is to use Switch and have this Route after /customer/cards. Switch will render the first matched Route and hence Route with path="" won't be rendered if the one with customer/cards renders

So You Routes will look like

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

and your Customer component will look like

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

Working codepen

Right, I forget about the Switch operator. Thanks mate! – Velidan Feb 28 '18 at 12:51 — Velidan, Feb 28 '18 at 12:51

React Router v4 - Dynamic Config with the changed default route

1 Answers1