Nested routes with react router v4 / v5

by

In react-router-v4 you don’t nest <Routes />. Instead, you put them inside another <Component />.

For instance

<Route path="/topics" component={Topics}>
  <Route path="/topics/:topicId" component={Topic} />
</Route>

should become

<Route path="/topics" component={Topics} />

with

const Topics = ({ match }) => (
  <div>
    <h2>Topics</h2>
    <Link to={`${match.url}/exampleTopicId`}>
      Example topic
    </Link>
    <Route path={`${match.path}/:topicId`} component={Topic}/>
  </div>
)

Here is a basic example straight from the react-router documentation.

More Related Contents:

  1. Programmatically Navigate using react-router
  2. Passing custom props to router component in react-router v4
  3. How to implement authenticated routes in React Router 4?
  4. React Router with optional path parameter
  5. React doesn’t reload component data on route param change or query change
  6. onEnter not called in React-Router
  7. Detect change in query param react-router-dom v4.x and re-render component
  8. React-router URLs don’t work when refreshing or writing manually
  9. Pass props in Link react-router
  10. How to use Redirect in version 5 of react-router-dom of Reactjs
  11. react-router scroll to top on every transition
  12. Use anchors with react-router
  13. Intercept/handle browser’s back button in React-router?
  14. React Routing works in local machine but not Heroku
  15. Multiple path names for a same component in React Router
  16. react-router getting this.props.location in child components
  17. Get path params in react-router v4
  18. Uncaught TypeError: Cannot read property ‘push’ of undefined (React-Router-Dom)
  19. Client Routing (using react-router) and Server-Side Routing
  20. Multiple Nested Routes in react-router-dom v4
  21. react-router go back a page how do you configure history?
  22. How to manually invoke Link in React-router?
  23. react-router (v4) how to go back?
  24. Material-ui adding Link component from react-router
  25. How to use normal anchor links with react-router
  26. React router global header
  27. React: ‘Redirect’ is not exported from ‘react-router-dom’
  28. React Router BrowserRouter leads to “404 Not Found – nginx ” error when going to subpage directly without through a home-page click
  29. On React Router, how to stay logged in state even page refresh?
  30. ReactJS Bootstrap Navbar and Routing not working together

Leave a Comment