Jacob Paris
← Back to all content

Structure your website with nested layouts with Remix

Using ReactRouter, we can create a layout route with the element attribute and then also passing child routes

<Route element={<SidebarLayout />}>
<Route path="/something" element={<Something />} />
</Route>

Using Remix's file based routing, the equivalent file system would look like this

routes/__sidebar/something.tsx
routes/__sidebar.tsx

Where the __sidebar.tsx renders this

<div>
<Sidebar />
<Outlet />
</div>

A route file beginning in __ will not add segments to the URL, but they can still have loaders if you need data but don't want to mess with the URL. For example, a sidebar layout can have a loader that gets the information needed to render the sidebar, which will only be included on pages where you want to display the sidebar.

Other pages that don't show the sidebar, won't have the layout and won't call its loader.

and inside routes/\_\_sidebar.tsx or SidebarLayout render the sidebar and an Outlet, inside the Outlet the nested routes will be rendered

This pattern lets you share the layout across many routes, for example both a /posts and /users route with the same sidebar.

routes/__sidebar
routes/__sidebar/posts
routes/__sidebar/users
Professional headshot

Hi, I'm Jacob

Hey there! I'm a developer, designer, and digital nomad with a background in lean manufacturing.

About once per month, I send an email with new guides, new blog posts, and sneak peeks of what's coming next.

Everyone who subscribes gets access to the source code for this website and every example project for all my tutorials.

Stay up to date with everything I'm working on by entering your email below.

Unsubscribe at any time.