Multiple Nested Routes in react-router-dom v4

by

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="https://stackoverflow.com/" 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

More Related Contents:

  1. react router v6 navigate outside of components
  2. Problem in redirecting programmatically to a route in react router v6
  3. React doesn’t reload component data on route param change or query change
  4. Uncaught TypeError: Cannot read property ‘push’ of undefined (React-Router-Dom)
  5. ReactJS: [Home] is not a component. All component children of must be a or
  6. How to create a protected route with react-router-dom?
  7. React: ‘Redirect’ is not exported from ‘react-router-dom’
  8. How can I redirect in React Router v6?
  9. Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: object
  10. Pass props in Link react-router
  11. How to use Redirect in version 5 of react-router-dom of Reactjs
  12. Link tag inside BrowserRouter changes only the URL, but doesn’t render the component
  13. How do I render components with different layouts/elements using react-router-dom v6
  14. react-router scroll to top on every transition
  15. React Router with optional path parameter
  16. Use anchors with react-router
  17. react-router getting this.props.location in child components
  18. How do you pass data when using the navigate function in react router v6
  19. How to sync Redux state and url hash tag params
  20. onEnter not called in React-Router
  21. Error “Error: A is only ever to be used as the child of element”
  22. react-router go back a page how do you configure history?
  23. How to manually invoke Link in React-router?
  24. react-router-dom v6 Routes showing blank page
  25. using history with react-router-dom v6
  26. React Router Dom routes are returning blank pages
  27. Material-ui adding Link component from react-router
  28. How to use normal anchor links with react-router
  29. React router global header
  30. React router dom: Route and Router not working at all

Leave a Comment