Search code examples
reactjsreact-routerreact-router-redux

react-router-redux - how to do nested routing

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

Solution

  • 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.