Looking for example of layout usage

[netanelben]

Im looking for an react best practice example of using the layout mechanism of the router, for the most basic website usage which is rendering Header and Footer components and in between the route match components.

So the header + footer would be the common logic for each route.

Appreciate any help,
thanks in advance.

[Moshyfawn]

import  { createRouteConfig, Outlet, createReactRouter } from '@tanstack/react-router'

const rootRoute = createRouteConfig()

const layoutRoute = rootRoute.createRoute({
  id: "layout",
  component: () => (
    <div>
      <header>...</header>
      <main>
        <Outlet />
      </main>
      <footer>...</footer>
    </div>
  ),
});

const indexRoute = layoutRoute.createRoute({
  path: '/'
})

const fooRoute = layoutRoute.createRoute({
  path: 'foo'
})

const routeConfig = rootRoute.addChildren([layoutRoute.addChildren([fooRoute, indexRoute])])

const router = createReactRouter({
  routeConfig
})