Learning on Web Dev Open is free for all.

Framework Internals > The App Router, and where the seams areLayouts nest, and that has consequences
Phase 04The App Router, and where the seams are225 of 434

Layouts nest, and that has consequences

A layout persists across the navigations below it, which is exactly what you want until it is exactly what you do not.

Concept14 minAI pair

A layout wraps every route beneath it and is not re-created when you navigate between siblings. Scroll position in the sidebar is kept, the open state of a nav section is kept, a client component in the layout keeps its state. That is the feature, and it is why navigation inside a section feels instant rather than like a page load.

The consequence is that anything you wanted reset on navigation will not be. A form in a layout keeps its draft when the user moves to a different record. A template is the escape hatch, same nesting, remounted on every navigation, and reaching for it is the right call for exactly those cases rather than a fallback when persistence confuses you.

Layouts also cannot see the route parameters of the pages below them, which surprises people who want the record name in the sidebar. That is not an oversight: a layout that depended on its children’s params could not persist across navigations between them. Fetch it in the layout from a param it does own, or render it in the page and slot it into the layout as children.

You should now be able to

  • Predict what re-renders on a navigation within a layout
  • Choose between a layout and a template deliberately
Ask the community

Loading…