react-router-redux - how to do nested routing

Question

How do you get nested routing with react-router-redux (5.0.0-alpha.9)?

I want to be able to route to the likes of /event/create I am able to successfully get to a route of /event/:id, e.g. /event/1234

I have -

<Route exact path="/" component={HomePage} />
<Route path="/event/:id" component={EventView} />
<Route path="/event/create" component={EventCreate} />

It looks as though when I go to /event/create is routing to /event/:id

Possible duplicate of [Nested routes with react router v4](https://stackoverflow.com/questions/41474134/nested-routes-with-react-router-v4) — mohammedgqudah, Aug 15 '18 at 07:55

score 3 · Accepted Answer · answered Aug 15 '18 at 08:18

The Router will return on the first match. In your case, you simply need to move the last two statements as :id will match on anything:

<Route exact path="/" component={HomePage} />
<Route path="/event/create" component={EventCreate} />
<Route path="/event/:id" component={EventView} />

This will match on /event/create first and if there's any other value, it will match on the subsequent route.

react-router-redux - how to do nested routing

1 Answers1