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 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 2

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