Nested routes with react router v4 v5

Question

I am currently struggling with nesting routes using react router v4   The closest example was the route config in the  React-Router v4 Documentation   I want to split my app in 2 different parts   A frontend and an admin area   I was thinking about something like this    lt Match pattern     component  Frontpage  gt     lt Match pattern   home  component  HomePage    gt     lt Match pattern   about  component  AboutPage    gt   lt  Match gt   lt Match pattern   admin  component  Backend  gt     lt Match pattern   home  component  Dashboard    gt     lt Match pattern   users  component  UserPage    gt   lt  Match gt   lt Miss component  NotFoundPage    gt    The frontend has a different layout and style than the admin area  So within the frontpage the route home  about and so one should be the child routes    home should be rendered into the Frontpage component and  admin home should be rendered within the Backend component    I tried some variations but I always ended in not hitting  home or  admin home   Edit - 19 04 2017  Because this post has a lot of views right now I updated it with the final solution  I hope it helps someone   Edit - 08 05 2017  Removed old solutions  Final solution   This is the final solution I am using right now  This example also has a global error component like a traditional 404 page   import React    Component   from  react   import   Switch  Route  Redirect  Link   from  react-router-dom    const Home        gt   lt div gt  lt h1 gt Home lt  h1 gt  lt  div gt   const User        gt   lt div gt  lt h1 gt User lt  h1 gt  lt  div gt   const Error        gt   lt div gt  lt h1 gt Error lt  h1 gt  lt  div gt   const Frontend   props   gt      console log  Frontend      return        lt div gt         lt h2 gt Frontend lt  h2 gt         lt p gt  lt Link to     gt Root lt  Link gt  lt  p gt         lt p gt  lt Link to   user  gt User lt  Link gt  lt  p gt         lt p gt  lt Link to   admin  gt Backend lt  Link gt  lt  p gt         lt p gt  lt Link to   the-route-is-swiggity-swoute  gt Swiggity swooty lt  Link gt  lt  p gt         lt Switch gt           lt Route exact path     component  Home   gt           lt Route path   user  component  User   gt           lt Redirect to              state    error  true                gt         lt  Switch gt         lt footer gt Bottom lt  footer gt       lt  div gt          const Backend   props   gt      console log  Backend      return        lt div gt         lt h2 gt Backend lt  h2 gt         lt p gt  lt Link to   admin  gt Root lt  Link gt  lt  p gt         lt p gt  lt Link to   admin user  gt User lt  Link gt  lt  p gt         lt p gt  lt Link to     gt Frontend lt  Link gt  lt  p gt         lt p gt  lt Link to   admin the-route-is-swiggity-swoute  gt Swiggity swooty lt  Link gt  lt  p gt         lt Switch gt           lt Route exact path   admin  component  Home   gt           lt Route path   admin user  component  User   gt           lt Redirect to              state    error  true                gt         lt  Switch gt         lt footer gt Bottom lt  footer gt       lt  div gt          class GlobalErrorSwitch extends Component     previousLocation   this props location    componentWillUpdate nextProps        const   location     this props       if  nextProps history action      POP         amp  amp    location state     location state error             this previousLocation   this props location               render         const   location     this props      const isError             location state  amp  amp        location state error  amp  amp        this previousLocation     location    not initial render            return          lt div gt                                isError              lt Route component  Error    gt               lt Switch location  isError   this previousLocation   location  gt                 lt Route path   admin  component  Backend    gt                 lt Route path     component  Frontend    gt               lt  Switch gt          lt  div gt               class App extends Component     render         return  lt Route component  GlobalErrorSwitch    gt         export default App

User · Answer

Some thing like this    x000D   x000D  import React from  react   x000D  import   x000D    BrowserRouter as Router  Route  NavLink  Switch  Link x000D    from  react-router-dom   x000D   x000D  import     assets styles App css   x000D   x000D  const Home        gt  x000D     lt NormalNavLinks gt  x000D       lt h1 gt HOME lt  h1 gt  x000D     lt  NormalNavLinks gt   x000D  const About        gt  x000D     lt NormalNavLinks gt  x000D       lt h1 gt About lt  h1 gt  x000D     lt  NormalNavLinks gt   x000D  const Help        gt  x000D     lt NormalNavLinks gt  x000D       lt h1 gt Help lt  h1 gt  x000D     lt  NormalNavLinks gt   x000D   x000D  const AdminHome        gt  x000D     lt AdminNavLinks gt  x000D       lt h1 gt root lt  h1 gt  x000D     lt  AdminNavLinks gt   x000D   x000D  const AdminAbout        gt  x000D     lt AdminNavLinks gt  x000D       lt h1 gt Admin about lt  h1 gt  x000D     lt  AdminNavLinks gt   x000D   x000D  const AdminHelp        gt  x000D     lt AdminNavLinks gt  x000D       lt h1 gt Admin Help lt  h1 gt  x000D     lt  AdminNavLinks gt   x000D   x000D   x000D  const AdminNavLinks    props    gt    x000D     lt div gt  x000D       lt h2 gt Admin Menu lt  h2 gt  x000D       lt NavLink exact to   admin  gt Admin Home lt  NavLink gt  x000D       lt NavLink to   admin help  gt Admin Help lt  NavLink gt  x000D       lt NavLink to   admin about  gt Admin About lt  NavLink gt  x000D       lt Link to     gt Home lt  Link gt  x000D       props children  x000D     lt  div gt  x000D     x000D   x000D  const NormalNavLinks    props    gt    x000D     lt div gt  x000D       lt h2 gt Normal Menu lt  h2 gt  x000D       lt NavLink exact to     gt Home lt  NavLink gt  x000D       lt NavLink to   help  gt Help lt  NavLink gt  x000D       lt NavLink to   about  gt About lt  NavLink gt  x000D       lt Link to   admin  gt Admin lt  Link gt  x000D       props children  x000D     lt  div gt  x000D     x000D   x000D  const App        gt    x000D     lt Router gt  x000D       lt div gt  x000D         lt Switch gt  x000D           lt Route exact path     component  Home   gt  x000D           lt Route path   help  component  Help   gt  x000D           lt Route path   about  component  About   gt  x000D   x000D           lt Route exact path   admin  component  AdminHome   gt  x000D           lt Route path   admin help  component  AdminHelp   gt  x000D           lt Route path   admin about  component  AdminAbout   gt  x000D         lt  Switch gt  x000D   x000D       lt  div gt  x000D     lt  Router gt  x000D     x000D   x000D   x000D  export default App  x000D   x000D   x000D

User · Answer

react-router  v6 Update for 2021 The upcoming v6 will have nested Route components that Just Work    See example code in this blog post The question is about v4 v5  but when v6 ships the correct answer will be just use that if you can   react-router  v4  amp  v5 It s true that in order to nest Routes you need to place them in the child component of the Route  However if you prefer a more inline syntax rather than breaking your Routes up across components  you can provide a functional component to the render prop of the Route you want to nest under   lt BrowserRouter gt      lt Route path  quot   quot  component  Frontpage  exact   gt     lt Route path  quot  home quot  component  HomePage    gt     lt Route path  quot  about quot  component  AboutPage    gt      lt Route     path  quot  admin quot      render     match    url        gt           lt  gt           lt Route path     url     component  Backend  exact   gt           lt Route path     url  home   component  Dashboard    gt           lt Route path     url  users   component  UserPage    gt         lt   gt             gt    lt  BrowserRouter gt   If you re interested in why the render prop should be used  and not the component prop  it s because it stops the inline functional component from being remounted on every render  See the documentation for more detail  Note that the example wraps the nested Routes in a Fragment  Prior to React 16  you can use a container  lt div gt  instead

User · Answer

Using Hooks The latest update with hooks is to use useRouteMatch  Main routing component  export default function NestingExample       return        lt Router gt         lt Switch gt          lt Route path  quot  topics quot  gt            lt Topics   gt          lt  Route gt        lt  Switch gt       lt  Router gt          Child component function Topics          The  path  lets us build  lt Route gt  paths       while the  url  lets us build relative links     let   path  url     useRouteMatch       return        lt div gt         lt h2 gt Topics lt  h2 gt         lt h5 gt           lt Link to     url  otherpath   gt  topics otherpath  lt  Link gt         lt  h5 gt         lt ul gt           lt li gt             lt Link to     url  topic1   gt  topics topic1  lt  Link gt           lt  li gt           lt li gt             lt Link to     url  topic2   gt  topics topic2 lt  Link gt           lt  li gt         lt  ul gt            You can then use nested routing inside the child itself        lt Switch gt           lt Route exact path  path  gt             lt h3 gt Please select a topic  lt  h3 gt           lt  Route gt           lt Route path     path   topicId   gt             lt Topic   gt           lt  Route gt           lt Route path     path  otherpath  gt             lt OtherPath  gt           lt  Route gt         lt  Switch gt       lt  div gt

User · Answer

Just wanted to mention react-router v4 changed radically since this question was posted answed   There is no  lt Match gt  component any more   lt Switch gt is to make sure only the first match is rendered   lt Redirect gt  well    redirects to another route   Use or leave out exact to either in- or exclude a partial match   See the docs  They are great  https   reacttraining com react-router   Here s an example I hope is useable to answer your question    lt Router gt     lt div gt       lt Redirect exact from     to   front   gt       lt Route path     render       gt          return            lt div gt             lt h2 gt Home menu lt  h2 gt             lt Link to   front  gt front lt  Link gt             lt Link to   back  gt back lt  Link gt           lt  div gt                    gt                 lt Route path   front  render       gt          return            lt div gt           lt h2 gt front menu lt  h2 gt           lt Link to   front help  gt help lt  Link gt           lt Link to   front about  gt about lt  Link gt           lt  div gt                    gt       lt Route exact path   front help  render       gt          return  lt h2 gt front help lt  h2 gt            gt       lt Route exact path   front about  render       gt          return  lt h2 gt front about lt  h2 gt            gt       lt Route path   back  render       gt          return            lt div gt           lt h2 gt back menu lt  h2 gt           lt Link to   back help  gt help lt  Link gt           lt Link to   back about  gt about lt  Link gt           lt  div gt                    gt       lt Route exact path   back help  render       gt          return  lt h2 gt back help lt  h2 gt            gt       lt Route exact path   back about  render       gt          return  lt h2 gt back about lt  h2 gt            gt     lt  div gt   lt  Router gt    Hope it helped  let me know  If this example is not answering your question well enough  tell me and I ll see if I can modify it

User · Answer

A complete answer for React Router v5   const Router        gt      return        lt Switch gt         lt Route path   quot   quot   component  LandingPage  exact   gt         lt Route path   quot  games quot   component  Games    gt         lt Route path   quot  game-details  id quot   component  GameDetails    gt         lt Route         path   quot  dashboard quot           render     match    path        gt               lt Dashboard gt               lt Switch gt                 lt Route                 exact                 path  path    quot   quot                   component  DashboardDefaultContent                  gt                 lt Route path     path  inbox   component  Inbox    gt                 lt Route                 path     path  settings-and-privacy                   component  SettingsAndPrivacy                  gt                 lt Redirect exact from  path    quot    quot   to  path    gt               lt  Switch gt             lt  Dashboard gt                     gt         lt Route path  quot  not-found quot  component  NotFound    gt         lt Redirect exact from   quot   quot   to   quot  not-found quot     gt       lt  Switch gt           export default Router   const Dashboard      children      gt      return        lt Grid       container       direction  quot row quot        justify  quot flex-start quot        alignItems  quot flex-start quot       gt         lt DashboardSidebarNavigation   gt         children       lt  Grid gt           export default Dashboard   Github repo is here  https   github com webmasterdevlin react-router-5-demo

User · Answer

A complete answer for React Router v6 or version 6 just in case needed  import Dashboard from  quot   dashboard Dashboard quot   import DashboardDefaultContent from  quot   dashboard dashboard-default-content quot   import   Route  Routes   from  quot react-router quot   import   useRoutes   from  quot react-router-dom quot      Routes is used to be Switch   const Router        gt       return        lt Routes gt         lt Route path  quot   quot  element   lt LandingPage   gt     gt         lt Route path  quot games quot  element   lt Games   gt     gt         lt Route path  quot game-details  id quot  element   lt GameDetails   gt     gt         lt Route path  quot dashboard quot  element   lt Dashboard   gt   gt           lt Route path  quot   quot  element   lt DashboardDefaultContent   gt     gt           lt Route path  quot inbox quot  element   lt Inbox   gt     gt           lt Route path  quot settings-and-privacy quot  element   lt SettingsAndPrivacy   gt     gt           lt Route path  quot   quot  element   lt NotFound   gt     gt         lt  Route gt         lt Route path  quot   quot  element   lt NotFound   gt     gt       lt  Routes gt          export default Router   import DashboardSidebarNavigation from  quot   dashboard-sidebar-navigation quot   import   Grid   from  quot  material-ui core quot   import   Outlet   from  quot react-router quot    const Dashboard        gt      return        lt Grid       container       direction  quot row quot        justify  quot flex-start quot        alignItems  quot flex-start quot       gt         lt DashboardSidebarNavigation   gt         lt Outlet   gt       lt  Grid gt           export default Dashboard   Github repo is here  https   github com webmasterdevlin react-router-6-demo

User · Answer

In react-router-v4 you don t nest  lt Routes   gt   Instead  you put them inside another  lt Component   gt      For instance   lt Route path   topics  component  Topics  gt     lt Route path   topics  topicId  component  Topic    gt   lt  Route gt    should become   lt Route path   topics  component  Topics    gt    with  const Topics      match      gt       lt div gt       lt h2 gt Topics lt  h2 gt       lt Link to     match url  exampleTopicId   gt        Example topic      lt  Link gt       lt Route path     match path   topicId   component  Topic   gt     lt  div gt         Here is a basic example straight from the react-router documentation

User · Answer

You can try something like  Routes js  import React    Component   from  react  import   BrowserRouter as Router  Route   from  react-router-dom   import FrontPage from    FrontPage   import Dashboard from    Dashboard   import AboutPage from    AboutPage   import Backend from    Backend   import Homepage from    Homepage   import UserPage from    UserPage   class Routes extends Component       render             return                lt div gt                   lt Route exact path     component  FrontPage    gt                   lt Route exact path   home  component  Homepage    gt                   lt Route exact path   about  component  AboutPage    gt                   lt Route exact path   admin  component  Backend    gt                   lt Route exact path   admin home  component  Dashboard    gt                   lt Route exact path   users  component  UserPage    gt                   lt  div gt                     export default Routes   App js  import React    Component   from  react   import logo from    logo svg   import    App css   import   BrowserRouter as Router  Route   from  react-router-dom  import Routes from    Routes    class App extends Component     render         return          lt div className  App  gt         lt Router gt           lt Routes  gt         lt  Router gt         lt  div gt                export default App    I think you can achieve the same from here also

User · Answer

interface IDefaultLayoutProps       children  React ReactNode    const DefaultLayout  React SFC lt IDefaultLayoutProps gt      children     gt        return            lt div className  DefaultLayout  gt               children           lt  div gt             const LayoutRoute  React SFC lt IDefaultLayoutRouteProps  amp  RouteProps gt      component  Component  layout  Layout     rest     gt    const handleRender    matchProps  RouteComponentProps lt     StaticContext gt     gt             lt Layout gt               lt Component     matchProps    gt           lt  Layout gt              return            lt Route     rest  render  handleRender   gt            const ScreenRouter        gt         lt BrowserRouter gt           lt div gt               lt Link to     gt Home lt  Link gt               lt Link to   counter  gt Counter lt  Link gt               lt Switch gt                   lt LayoutRoute path     exact  true  layout  DefaultLayout  component  HomeScreen    gt                   lt LayoutRoute path   counter  layout  DashboardLayout  component  CounterScreen    gt               lt  Switch gt           lt  div gt       lt  BrowserRouter gt

User · Answer

I succeeded in defining nested routes by wrapping with Switch and define nested route before than root route    lt BrowserRouter gt     lt Switch gt       lt Route path   staffs  id edit  component  StaffEdit    gt       lt Route path   staffs  id  component  StaffShow    gt       lt Route path   staffs  component  StaffIndex    gt     lt  Switch gt   lt  BrowserRouter gt    Reference  https   github com ReactTraining react-router blob master packages react-router docs api Switch md

User · Answer

React Router v6 allows to use both nested routes  like in v3  and separate  splitted routes  v4  v5   Nested Routes Keep all routes in one place for small medium size apps   lt Routes gt     lt Route path  quot   quot  element   lt Home   gt    gt       lt Route path  quot user quot  element   lt User   gt     gt        lt Route path  quot dash quot  element   lt Dashboard   gt     gt      lt  Route gt   lt  Routes gt    x000D   x000D  const App        gt      return        lt BrowserRouter gt         lt Routes gt              js is start path of stack snippet          lt Route path   js  element   lt Home   gt    gt             lt Route path  user  element   lt User   gt     gt             lt Route path  dash  element   lt Dashboard   gt     gt           lt  Route gt         lt  Routes gt       lt  BrowserRouter gt          const Home        gt      const location   useLocation     return        lt div gt         lt p gt URL path   location pathname  lt  p gt         lt Outlet   gt         lt p gt           lt Link to  user  style   paddingRight   10px    gt user lt  Link gt           lt Link to  dash  gt dashboard lt  Link gt         lt  p gt       lt  div gt         const User        gt   lt div gt User profile lt  div gt  const Dashboard        gt   lt div gt Dashboard lt  div gt   ReactDOM render  lt App   gt   document getElementById  root     x000D   lt div id  root  gt  lt  div gt       lt script src  https   unpkg com react 16 13 1 umd react production min js  gt  lt  script gt       lt script src  https   unpkg com react-dom 16 13 1 umd react-dom production min js  gt  lt  script gt       lt script src  https   unpkg com history 5 0 0 umd history production min js  gt  lt  script gt       lt script src  https   unpkg com react-router 6 0 0-alpha 5 umd react-router production min js  gt  lt  script gt       lt script src  https   unpkg com react-router-dom 6 0 0-alpha 5 umd react-router-dom production min js  gt  lt  script gt       lt script gt var   BrowserRouter  Routes  Route  Link  Outlet  useNavigate  useLocation     window ReactRouterDOM  lt  script gt  x000D   x000D   x000D   Alternative  Define your routes as plain JavaScript objects via useRoutes  Separate Routes You can use separates routes to meet requirements of larger apps like code splitting     inside App jsx   lt Routes gt     lt Route path  quot    quot  element   lt Home   gt     gt   lt  Routes gt      inside Home jsx   lt Routes gt     lt Route path  quot user quot  element   lt User   gt     gt     lt Route path  quot dash quot  element   lt Dashboard   gt     gt   lt  Routes gt    x000D   x000D  const App        gt      return        lt BrowserRouter gt         lt Routes gt              js is start path of stack snippet          lt Route path   js    element   lt Home   gt     gt         lt  Routes gt       lt  BrowserRouter gt          const Home        gt      const location   useLocation     return        lt div gt         lt p gt URL path   location pathname  lt  p gt         lt Routes gt           lt Route path  user  element   lt User   gt     gt           lt Route path  dash  element   lt Dashboard   gt     gt         lt  Routes gt         lt p gt           lt Link to  user  style   paddingRight   5px    gt user lt  Link gt           lt Link to  dash  gt dashboard lt  Link gt         lt  p gt       lt  div gt         const User        gt   lt div gt User profile lt  div gt  const Dashboard        gt   lt div gt Dashboard lt  div gt   ReactDOM render  lt App   gt   document getElementById  root     x000D   lt div id  root  gt  lt  div gt       lt script src  https   unpkg com react 16 13 1 umd react production min js  gt  lt  script gt       lt script src  https   unpkg com react-dom 16 13 1 umd react-dom production min js  gt  lt  script gt       lt script src  https   unpkg com history 5 0 0 umd history production min js  gt  lt  script gt       lt script src  https   unpkg com react-router 6 0 0-alpha 5 umd react-router production min js  gt  lt  script gt       lt script src  https   unpkg com react-router-dom 6 0 0-alpha 5 umd react-router-dom production min js  gt  lt  script gt       lt script gt var   BrowserRouter  Routes  Route  Link  Outlet  useNavigate  useLocation     window ReactRouterDOM  lt  script gt  x000D   x000D   x000D

[javascript] Nested routes with react router v4 / v5

Examples related to javascript

Examples related to reactjs

Examples related to nested

Examples related to react-router

Examples related to react-router-v4