Layout Example (About)

You can define a layout by default exporting a React component from a layout.js file. The component should accept a children prop that will be populated with a child layout (if it exists) or a page during rendering.

When navigating between pages, we want to persist page state (input values, scroll position, etc.) for a Single-Page Application (SPA) experience.

This layout pattern will allow for state persistence because the React component tree is persisted between page transitions. To preserve state, we need to prevent the React component tree from being discarded between page transitions.

Try It Out

To visualize this, try tying in the search input in the Sidebar and then changing routes. You will notice the input state is persisted.