Multiple Nested Routes In React-router-dom V4

November 30, 2023 Post a Comment

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 c

Solution 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><Routeexactpath="/"component={DummyIndex} /> {/* Note-1 */}
    <Routepath="/login"component={Login} /><Routepath="/home"component={Home} /><Routepath="/about"component={About} /><Routepath="/etc"component={Etc} /></div></Router>

Then in Home Component, define your routes

classHomeextendsComponent {
  render() {
    return<div><Routeexactpath={this.props.match.path}component={HomeDefault} /><Routepath={`${this.props.match.path}/one`} component={HomePageOne} /><Routepath={`${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

Solution 2:

Use Switch component in router v4

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

exportdefaultclassHomeextendsComponent {
render() {
    return (
      <divclassName="Home">
          { this.props.children }
      </div>
    )
  }
}

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

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

Solution 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

Solution 5:

Use Like the following:

classAppextendsComponent {
  render() {
    return (
      <BrowserRouter><Linkto='/create'> Create </Link><Linkto='/ExpenseDashboard'> Expense Dashboard </Link><Switch><Routepath='/ExpenseDashboard'component={ExpenseDashboard} /><Routepath='/create'component={AddExpensePage} /><Routepath='/Edit'component={EditPage} /><Routepath='/Help'component={HelpPage} /><Routecomponent={NoMatch} /></Switch></BrowserRouter>
    );
  }
}

See more @ Switch on GitHub

JavaScript File