Layouts Revisited

React Router supports the concept of layout routes. These are routes that contain other routes and render those other routes as nested children, and as you may recall, this concept was introduced in Chapter 12, Multipage Apps with React Router.

With React Router 6.4, a layout route can be defined like this:

const router = createBrowserRouter([
  {
    path: '/',
    element: <Root />,
    children: [
      { index: true, element: <Welcome /> },
    ]
  }
]);

The index route is a child route of the / route, which in turn is the layout route in this example. The Root component could look like this:

function Root() {
  return (
    <>
      <header>
        <MainNavigation />
      </header>
      <Outlet />
    </>
  );
}

As mentioned, layout routes were introduced in the previous chapter. But when using the extra data capabilities offered by React Router, there are two noteworthy changes...