Nested routes and layouts

📘What it really is

• Routes can be nested so pages share a layout (header, menu, footer):

<Route element={<Layout />}>
  <Route path="/" element={<Dashboard />} />
  <Route path="/enquiries/new" element={<NewEnquiry />} />
  <Route path="/enquiries/:id" element={<EnquiryDetail />} />
</Route>

• The layout shows where the child page goes with <Outlet />:

export function Layout() {
  return (
    <>
      <Header />
      <main><Outlet /></main>
      <Footer />
    </>
  );
}

• Layouts can nest further: a settings area with its own side menu inside the main layout.
• index routes give a default child: <Route index element={<Dashboard />} /> shows at the parent's own address.
• Data shared by all pages, like the enquiries list, can be passed to Outlet with its context prop and read with useOutletContext, or kept in Context (Module 37).