Children won’t render when using a layout in ReactJS

by

A layout component should render an Outlet for nested Route components to be rendered into. This is different from wrapper components that consume and render the children prop.

See Layout Routes and Outlet for more details.

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

const Layout = () => {
  return (
    <div>
      <Outlet /> // <-- nested routes rendered here!
    </div>
  )
};

For comparison, wrapper components are used to wrap a child component in the element prop. Example:

<Routes>
  <Route
    path="/"
    element={(
      <Layout>
        <MainLanding />
      </Layout>
    )}
  />
  <Route
    path="/store"
    element={(
      <Layout>
        <StoreLanding />
      </Layout>
    )}
  />
</Routes>

More Related Contents:

  1. React : difference between and
  2. How to create a protected route?
  3. React-router-v6 access a url parameter
  4. React Router v4 renders multiple routes
  5. How to pass params into link using React router v6?
  6. react-router-dom v6 useNavigate passing value to another component
  7. Detect Route Change with react-router
  8. Simple Conditional Routing in Reactjs
  9. Cannot read property ‘history’ of undefined (useHistory hook of React Router 5)
  10. Invariant failed: You should not use outside a
  11. useNavigate() may be used only in the context of a component
  12. React Router Dom v6 shows active for index as well as other subroutes
  13. React – TypeError: Cannot read properties of undefined (reading ‘params’)
  14. Error: useHref() may be used only in the context of a component. It works when I directly put the url as localhost:3000/experiences
  15. react app showing empty page when redirecting on production build
  16. React App goes blank after importing React-Router-Dom
  17. React Router 4 Nested Routes not rendering
  18. How to go back to previous route in react-router-dom v6
  19. React Router V6 – Error: useRoutes() may be used only in the context of a component
  20. How to get parameter value from query string?
  21. Nesting Routes in react-router v4
  22. 404 when trying to enter a react app route
  23. React-Router open Link in new tab
  24. How to tell webpack dev server to serve index.html for any route
  25. react-router vs react-router-dom, when to use one or the other?
  26. How to create a protected route with react-router-dom?
  27. How to nest routes in React Router v4?
  28. React router and this.props.children – how to pass state to this.props.children
  29. using NavLink with external URL
  30. How to remove the hash from the url in react-router

Leave a Comment