In a file-based router, what does it mean that one URL resolves to a chain of nested layouts rather than a single page module?

## One URL, several modules A **file-based router** derives its routes from the shape of the project tree rather than from a registration list you maintain by hand. Each directory under the routes root usually corresponds to one URL segment, and particular files inside a directory mark it as a **level**: one file makes the directory a page, another makes it a wrapper that everything nested below renders inside. Resolving a URL like `/teams/42/members` therefore does not select a single file. The router walks the tree segment by segment and collects every level it passes through, producing an ordered **chain** - from the outermost level, which applies to every route in the app, down to the module that renders the page for that exact path. ## What a single level owns A level is more than markup. Most meta-frameworks let one level own several things at once: - **A shell** - the markup it wraps around its child, with a slot the child renders into. - **A data step** - a route-level function that resolves what this level needs before it renders. - **A pending state** - what fills its slot while its own work is unfinished. - **A failure state** - what fills its slot when its own work throws. - **Scoped context** - providers, stores and subscriptions created here are visible to everything below and to nothing above. A level does not have to render anything visible. It is perfectly normal to add one purely to attach a data step, a pending state, or a provider to a whole branch of the tree. ## The order things render in 1. The router matches the path and produces the chain, outermost level first. 2. Each level renders in turn, leaving a slot where the next level goes. 3. The innermost module - the page - renders last and ends up deepest in the resulting markup. So the chain is *resolved* outside-in, and the output is nested the same way: the page's markup sits inside every shell above it. Frameworks differ in how much of this happens on the server versus the client, and in whether the levels can be streamed out as they finish, but the nesting relationship is the same everywhere. | Level | Typical responsibility | |---|---| | Outermost | The surrounding document markup, global styles, app-wide providers | | Section | Chrome for a whole area - a dashboard sidebar, an admin frame | | Record | A level scoped to one entity, matched with a dynamic parameter | | Page | The content of this exact URL | ## Why the outermost level is special The top of the chain is the only level every route passes through. It is the level that owns the one-per-document elements - the root element, the head, the body, a global stylesheet link - and, because nothing sits above it, it is also the level with no ancestor to catch a failure or render a pending state on its behalf. Everything it does is paid for by every route in the application, which is why teams keep it deliberately thin. ## What the model buys, and what it costs - **Declared once, applied everywhere.** Shared chrome lives on the level that owns it instead of being imported by every page. - **Per-level granularity.** Each level can resolve its own data and show its own pending or failure state, so one slow or broken part does not take the whole page with it. - **Cheap navigation.** Because the router knows which levels a URL matched, moving between two routes under the same parent can reuse the part of the chain that did not change. - **Multiplied cost.** Anything placed on a shared level runs for every route beneath it - its data step, its bundle, and its blocking time. A shared level is leverage in both directions. ## Common misreadings - *That the page wraps the layouts.* It is the other way round: the page is the innermost thing. - *That only the top level may fetch.* Any level may own a data step; that is the point of the chain. - *That a level must show markup.* It may exist only to scope data, state or a boundary. - *That the chain is a component you assemble by hand.* The router composes it from the matched path; your job is deciding what lives at which level.