React Router v4 with multiple layouts

by

What I have done for this is create a simple component that adds an extra property to the Route component which is layout:

function RouteWithLayout({layout, component, ...rest}){
  return (
    <Route {...rest} render={(props) =>
      React.createElement( layout, props, React.createElement(component, props))
    }/>
  );
}

Then in your case your routes would look like this

<Switch>
    <RouteWithLayout layout={PublicLayout} path="https://stackoverflow.com/" component={HomePage}/>
    <RouteWithLayout layout={PublicLayout} path="/about" component={AboutPage}/>
    <RouteWithLayout layout={PrivateLayout} path="/profile" component={ProfilePage}/>
    <RouteWithLayout layout={PrivateLayout} path="/dashboard" component={DashboardPage}/>
</Switch>

More Related Contents:

  1. Programmatically navigate using React router
  2. React-router-v6 access a url parameter
  3. Component does not remount when route parameters change
  4. React.createElement: type is invalid — expected a string
  5. Programmatically navigating in React-Router v4
  6. react-router-dom v6 useNavigate passing value to another component
  7. Nesting Routes in react-router v4
  8. What is the best way to redirect a page using React Router? [closed]
  9. React Router Pass Param to Component
  10. How to stop /#/ in browser with react-router?
  11. react-router-dom useParams() inside class component
  12. What is withRouter for in react-router-dom?
  13. How do you programmatically update query params in react-router?
  14. How to tell webpack dev server to serve index.html for any route
  15. react-router vs react-router-dom, when to use one or the other?
  16. Using React-Router with a layout page or multiple components per page
  17. Target Active Link when the route is active in Next.js
  18. Use history.push in action creator with react-router-v4?
  19. How do I avoid ‘Function components cannot be given refs’ when using react-router-dom?
  20. Error: useHref() may be used only in the context of a component. It works when I directly put the url as localhost:3000/experiences
  21. Page layout broken in React Router v6
  22. React App goes blank after importing React-Router-Dom
  23. Pass object through Link in react router
  24. Automatic redirect after login with react-router
  25. How to nest routes in React Router v4?
  26. Passing values through React-Router v4
  27. How to generate sitemap with react router
  28. How to create dynamic route in gatsby
  29. React Router work on reload, but not when clicking on a link
  30. React Router V6 – Error: useRoutes() may be used only in the context of a component

Leave a Comment