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


        

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

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 3

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 4

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>

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

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.