Building a Multi-Page SPA with React RouterEntry 4 of 20

Layouts and Nested Routes with `<Outlet />`

A layout route wraps child routes with shared UI (navigation, footer). <Outlet /> marks where the matching child renders.

Notes

Add a parent route with a layout element and a children array.
Child paths without a leading / are relative to the parent.
Layouts can nest: a root layout for the app and an EventsRootLayout for the events section.

What / Why / When

What: Shared wrappers for groups of pages.
Why: Navigation and layout are written once instead of on every page.
When: Any UI shared across multiple routes.

Code compare

React

// pages/Root.tsximport { Outlet } from "react-router";import MainNavigation from "../components/MainNavigation";export default function RootLayout() {  return (    <>      <MainNavigation />      <main>        <Outlet /> {/* child routes render here */}      </main>    </>  );}

Angular

// root-layout.component.ts@Component({  selector: "app-root-layout",  imports: [RouterOutlet, MainNavigationComponent],  template: `    <app-main-navigation />    <main>      <router-outlet />    </main>  `,})export class RootLayoutComponent {}

Quick reference

React	Angular
`children: [...]`	`children: [...]`
`<Outlet />`	`<router-outlet />`