How to nest routes in React Router v4?

by

Best pattern I have found so far. 

// main app
<div>
    // not setting a path prop, makes this always render
    <Route component={AppShell}/>
    <Switch>
        <Route exact path="https://stackoverflow.com/" component={Login}/>
        <Route path="/dashboard" component={AsyncDashboard(userAgent)}/>
        <Route component={NoMatch}/>
    </Switch>
</div>

I can just keep nesting this inside a component and everything works nice including hmr(If using webpack, dont forget to set output.publicPath to "https://stackoverflow.com/")

// dashboard component
<div>
    // the same way as before, not setting a path prop
    // makes it render on every /dashboard/** request 
    <Route component={DashboardTAB}/>
    <Switch>
        // longer path (with same root) than others first
        <Route path="/dashboard/graphs/longerpath" component={GraphForm}/>
        <Route path="/dashboard/graphs" component={Graphs}/>
        <Route path="/dashboard/workers" component={List}/>
        <Route path="/dashboard/insert" component={InsertComponent}/>
    </Switch>
</div>

More Related Contents:

  1. How to push to History in React Router v4?
  2. Programmatically navigating in React-Router v4
  3. Nesting Routes in react-router v4
  4. React Router v4 – How to get current route?
  5. Detect Route Change with react-router
  6. Simple Conditional Routing in Reactjs
  7. Nested Routes not rendering with React Router v4
  8. Use history.push in action creator with react-router-v4?
  9. React Router 4 Nested Routes not rendering
  10. React router 4 does not update view on link, but does on refresh
  11. React Router work on reload, but not when clicking on a link
  12. React : difference between and
  13. How to pass params with history.push/Link/Redirect in react-router v4?
  14. React Router v4 renders multiple routes
  15. How to get history on react-router v4?
  16. How to pass params into link using React router v6?
  17. You should not use outside a
  18. How do I pass state through React_router?
  19. react router v4 default page(not found page)
  20. React Router Dom v6 shows active for index as well as other subroutes
  21. React – TypeError: Cannot read properties of undefined (reading ‘params’)
  22. React router, pass data when navigating programmatically?
  23. react routing is able to handle different url path but tomcat returns 404 not available resources
  24. react router v6 No routes matched location
  25. Detect change in query param react-router-dom v4.x and re-render component
  26. React: Hide a Component on a specific Route
  27. React router and this.props.children – how to pass state to this.props.children
  28. using NavLink with external URL
  29. Children won’t render when using a layout in ReactJS
  30. React Router Navigate pathing

Leave a Comment