Using React-Router with a layout page or multiple components per page

Question

I am adding react router to an existing project.

At present a model is passed in to a root component which contains a navigation component for the sub navigation an

Answer 1

2019 +

The simple and clean way to do it and avoid abusive re-rendering is (tested on react router v5, need to be confirmed on react router v4):

which can be refactored to:

const routes = [
  {
    layout:Layout1,
    subRoutes:[
      {
        path:"/route1/:id/:token",
        component:SetPassword
      },
      {
        exact:true,
        path:"/",
        component:SignIn
      },
    ]
  },
  {
    layout:Layout2,
    subRoutes:[
      {
        path:"/route2",
        component:Home
      },
    ]
  }
];

with:

      
        {routes.map((route,i)=>
          r.exact)} path={route.subRoutes.map(r=>r.path)}>
            
              {route.subRoutes.map((subRoute,i)=>
                
              )}
            
          
        )}