How to do nested routes with react router 4?

Question

Does anyone know how to do nested routes in react router 4? I want to set up routes like so:

import React from 'react';
import { Route, Switch } from 'react-router';

import Containers from './containers/index';
import Components from './components/index';

export default (
    <Switch>
      <Route path='/users' component={Containers.Users} />
      <Route path='/users/:id' component={Containers.User} />
    </Switch>
)

But /tickets/:id continues to default to the component that Containers.Users renders -- not the one from Containers.User. I had everything working with react-router 3 with a very simple setup but it seems that a lot has changed:

<Route path="/users" component={Containers.Users}>
  <Route path="/users/:id" component={Containers.User}/>
</Route >

Does anyone know the latest set up for a very simple nested route pattern like the above for react-router 4?

Possible duplicate of [Nested routes with react router v4](http://stackoverflow.com/questions/41474134/nested-routes-with-react-router-v4) — Pio, Apr 09 '17 at 07:31
You can see this [real app example](https://github.com/ModusCreateOrg/budgeting-sample-app-webpack2) where React Router 4 is implemented properly with nested routes — Grgur, Apr 24 '17 at 20:00

SiM · Answer 1 · 2017-04-13T09:23:55.050

1

Now in v4 you should add the Routes in the parent component, no more nested routes.

    <Redirect from="/courses/" to="/courses/html" />
    <Switch>
        <Route path="/courses/html" component={HTML} />
        <Route path="/courses/css" component={CSS} />
        <Route path="/courses/javascript" component={JavaScript} />
    </Switch>

Found this here https://teamtreehouse.com/community/warning-you-should-not-use-route-component-and-route-children-in-the-same-route-route-children-will-be-ignored

edited Apr 13 '17 at 09:23

answered Apr 12 '17 at 09:01

SiM

186
1
7

Thanks a lot sir! – Jonca33 Feb 04 '18 at 04:08

score 0 · Answer 2 · answered Apr 15 '17 at 03:50

I just had the same problem earlier today with React Router v4 and this solved the issue for me

<Route exact path="/users" component={Containers.Users/>
<Route path="/users/:id" component={Containers.Users />

In this case /users is the base path for your route with /users/:id being a child path so you need to specify an exact path for the parent route.

How to do nested routes with react router 4?

2 Answers2