Multiple Nested Routes in react-router-dom v4

Question

I need multiple nested routes in react-router-dom

I am using v4 of react-router-dom

I've got my

import { BrowserRouter as Router, Route } from 'react-router-dom';

and I need the components to render like so

--- Login
--- Home
    --- Page 1
    --- Page 2
    --- Page 3
--- About
--- etc

The Home component contains a Header component that is common to Page1, Page2, and, Page3 components, but is not present in Login and About.

My js code reads like so

<Router>
    <div>
        <Route path='/login' component={Login} />
        <Home>
            <Route path='/page1' component={Page1} />
            <Route path='/page2' component={Page2} />
            <Route path='/page3' component={Page3} />
        </Home>
        <Route path='/about' component={About} />
    </div>
</Router>

I expect the Login component to show only on /login When I request for /page1, /page2, /page3, they should contain the Home component and that page's content respectively.

What I get instead is the Login component rendered and below that Page1's component is rendered.

I'm pretty sure that I'm missing something very trivial or making a really silly mistake somewhere, and would appreciate all the help I could get. I've been stuck with this for the last two days.

Answer 1

Use Switch component in router v4

<Router>
<Switch>
  <Route path='/login' component={Login} />
  <Route path='/about' component={About} />
  <Home>
    <Route component={({ match }) =>
      <div>
        <Route path='/page1' component={Page1} />
        <Route path='/page2' component={Page2} />
        <Route path='/page3' component={Page3} />
      </div>
    }/>
  </Home>
</Switch>

export default class Home extends Component {
render() {
    return (
      <div className="Home">
          { this.props.children }
      </div>
    )
  }
}

I think this code shows the basic idea of using component.

Answer 2

Use the url/path match obtained from props this.props.match.path to get the path that is set to a component.

Define your main routes as below

<Router>
  <div>
    <Route exact path="/" component={DummyIndex} /> {/* Note-1 */}
    <Route path="/login" component={Login} />
    <Route path="/home" component={Home} />
    <Route path="/about" component={About} />
    <Route path="/etc" component={Etc} />
  </div>
</Router>

Then in Home Component, define your routes

class Home extends Component {
  render() {
    return <div>
      <Route exact path={this.props.match.path} component={HomeDefault} />
      <Route path={`${this.props.match.path}/one`} component={HomePageOne} />
      <Route path={`${this.props.match.path}/two`} component={HomePageTwo} />
    </div>
  }
}

The defined routes are as below

• /login
• /home
• /home/one
• /home/two
• /about
• /etc

If you want to nest routes further in HomePageOne like /home/one/a and /home/one/b, you can proceed the same approach.

Note-1: If you don't want further nesting, just set the route with prop exact.

EDIT (May 15, 2017)

Initially, I've used props.match.url and now I changed it to props.match.path.

We can use props.match.path instead of props.match.url in Route's path so that if you use path params in top level routes, you can get it in inner (nested) routes via props.match.params.

If you don't you any path params, props.match.url is enough

Answer 3

This week I had the same problem, I think the project is passing for time of confusion because all the documentation, examples and videos are for the previous versions and the docs for the version 4 are confusing
This is how I get the things done, let me know if this help

import React, { Component } from 'react';

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

import Root from './Root';
import Home from './Home';
import About from './About';

import './App.css';

class App extends Component {
    render() {
        return (
            <BrowserRouter>
                <div>
                    <Root>
                       <Switch>
                            <Route exact path="/" component={Home} />
                            <Route path="/home" component={Home} />
                            <Route path="/about" component={About} />
                        </Switch>
                    </Root>
                </div>
            </BrowserRouter>
        );
    }
}

export default App;

Answer 4

Move all childs routes to parent component and extend route like below.
<Route path={`${match.url}/keyword`} component={Topic}/>
also check react router training

Answer 5

Use Like the following:

class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <Link to='/create'> Create </Link>
        <Link to='/ExpenseDashboard'> Expense Dashboard </Link>
        <Switch>
          <Route path='/ExpenseDashboard' component={ExpenseDashboard} />
          <Route path='/create' component={AddExpensePage} />
          <Route path='/Edit' component={EditPage} />
          <Route path='/Help' component={HelpPage} />
          <Route component={NoMatch} />
        </Switch>
      </BrowserRouter>
    );
  }
}

See more @ Switch on GitHub

Answer 6

I had the same problem and I solved it like this

<BrowserRouter>
          <UserAuthProvider>
            <Root>
              <Switch>
                <GuardRoute type="public" exact path="/" component={Login} />
                <GuardRoute type="private" exact path="/home" component={Home} />
                <GuardRoute
                  type="private"
                  exact
                  path="/home/mascotas"
                  component={Mascotas}
                />

              </Switch>
            </Root>
          </UserAuthProvider>
        </BrowserRouter>