Nested routes & outlets

Compose route trees where parents render persistent layout and children fill outlets - including multiple named regions per route and pathless groups that share behavior without adding URL segments.

Nesting composes templates

A <Broute> declared inside another inherits its parent's template as a prefix: a child n1/{count:int} under nested matches /nested/n1/3. Children can be declared directly in the parent's markup, or in an explicit <Routes> block when the parent also has its own <Content> (the two are aliases - never use both). A child with an empty path is the index route: it matches the parent's path exactly.

<Broute Path="nested" Component="@typeof(Nested)">
    <Broute Path="n1/{count:int}"> ... </Broute>  @* matches /nested/n1/3 *@
</Broute>

/nested-route/1 /nested-route/5/hello /nested-route/10/world Non-existent nested → 404

The outlet renders the matched child

The parent decides where children appear by placing a <BrouterOutlet /> in its own content - the equivalent of React Router's <Outlet />. Everything around the outlet stays mounted while children swap, so parent state (timers, form input, scroll) survives child navigation. Outlet-hosted children get their own cascades: RouteParameters, BrouterRouteData, BrouterRouteMeta, and a BrouterRouteContext for lifecycle registration. The three nested* demos show the shapes: a Component parent with an outlet in its markup, two children sharing one outlet, and an inline parent declaring both its own outlet and an explicit <Routes> block.

/nested - component parent /nested2 - two children, one outlet /nested3 - inline parent + outlet

Named outlets & views

One route can drive several layout regions (Vue's "named views"). The parent declares outlets with names; the child supplies a <BrouterView Name="..."> fragment per region it wants to fill. A route that declares no view for a named outlet simply leaves that region empty - watch the sidebar clear when you switch from Stats to Activity in the dashboard demo.

@* Parent layout: two regions. *@
<BrouterOutlet />                      @* primary *@
<BrouterOutlet Name="sidebar" />

@* Child route: main content via Content, sidebar via a named view. *@
<Broute Path="/stats">
    <Content>Stats main content</Content>
    <Routes>
        <BrouterView Name="sidebar">Stats filters</BrouterView>
    </Routes>
</Broute>

/dashboard/stats - fills both regions /dashboard/activity - sidebar stays empty

Pathless groups

A <Broute Group> contributes no URL segments - it exists purely to attach shared behavior (a Guard, LeaveGuard, Loader, or ErrorContent) to all of its children, like SvelteKit's (group) folders. The dashboard wraps its children in a group whose guard counts every entry into the section - one declaration, every child covered, no /group in the URL. Groups without outlets pass their children straight through to the nearest ancestor outlet.

<Broute Group Path="" Guard="CountDashboardVisit">
    <Routes>
        <Broute Path="/stats"> ... </Broute>
        <Broute Path="/activity"> ... </Broute>
    </Routes>
</Broute>

Edit this page on GitHub