How do I render components with different layouts/elements using react-router-dom v6

by

If I understand your question, you are wanting to render the nav and sidebar on the non-login route. For this you can create a layout component that renders them and an outlet for the nested routes.

Example:

import { Outlet } from 'react-router-dom';

const AppLayout = () => (
  <>
    <NavBar />
    <SideBar />
    <main className={styles["main--container"]}>
      <div className={styles["main--content"]}>
        <Outlet /> // <-- nested routes rendered here
      </div>
    </main>
  </>
);

const App = () => {
  return (
    <>
      <Routes>
        <Route path="/login" element={<LoginPage />} />
        <Route path="/" element={<AppLayout />} >
          <Route path="/" element={<Dashboard />} /> // <-- nested routes
        </Route>
      </Routes>
    </>
  );
};

More Related Contents:

  1. Link tag inside BrowserRouter changes only the URL, but doesn’t render the component
  2. How to pass data from a page to another page using react router
  3. react router v6 navigate outside of components
  4. Problem in redirecting programmatically to a route in react router v6
  5. Error: [PrivateRoute] is not a component. All component children of must be a or
  6. React doesn’t reload component data on route param change or query change
  7. Uncaught TypeError: Cannot read property ‘push’ of undefined (React-Router-Dom)
  8. ReactJS – Pass props with Redirect component
  9. Multiple Nested Routes in react-router-dom v4
  10. How do you pass data when using the navigate function in react router v6
  11. how to listen for route change in react-router-dom v6
  12. ReactJS: [Home] is not a component. All component children of must be a or
  13. Error “Error: A is only ever to be used as the child of element”
  14. How to create a protected route with react-router-dom?
  15. react-router-dom v6 Routes showing blank page
  16. using history with react-router-dom v6
  17. React Router Dom routes are returning blank pages
  18. React router dom: Route and Router not working at all
  19. React: ‘Redirect’ is not exported from ‘react-router-dom’
  20. How to properly use useHistory () from react-router-dom?
  21. How can I redirect in React Router v6?
  22. babel-loader jsx SyntaxError: Unexpected token [duplicate]
  23. Scrollable div to stick to bottom, when outer div changes in size
  24. Passing props into external stylesheet in React Native?
  25. How is this type annotation working in React code without TypeScript?
  26. How to trigger off callback after updating state in Redux?
  27. How to programmatically clear/reset React-Select?
  28. Fetch image from API
  29. ReactJs: Prevent multiple times button press
  30. Measuring text width/height without rendering

Leave a Comment