Layout Example (About)

This example adds a property getLayout to your page, allowing you to return a React component for the layout. This allows you to define the layout on a per-page basis. Since we're returning a function, we can have complex nested layouts if desired.

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'll notice the input state is persisted.