Skip to main content
Version: 3.x

Extend layout route

This guide explains how you can extend an existing layout routes.

What is a layout route?

Layout routes are used to apply a the same layout to multiple pages, generally these are pathless routes. For more information how routing works in Remix, please see the Nested Routes documentation.

In Front-Commerce some of the main layout routes are:

To extend these routes you can either create your own layout route or re-use an existing one.

Create a new layout route

To create a new layout route you can create a new file in the routes folder

routes/_main.tsx
import { Outlet } from "@remix-run/react";

const Layout = () => {
return (
<div>
<header>{...}</header>
<div className="content">
<Outlet />
</div>
<footer>{...}</footer>
</div>
);
};

export default Layout;
danger

This will override the existing _main.tsx layout in the original theme, it doing so it might also override required actions, loaders, meta, etc. Please refer to the original layout to ensure you are not missing anything. If you you simply require a new layout, you can name it differently, for example _layout.tsx. or re-use the existing layout route, see below.

Re-use an existing layout route

To re-use an existing layout route you can create a new file in the routes

routes/_main.tsx
export * from "theme/UNSTABLE_routes/_main"; // ensures all actions, loaders, meta, etc. are preserved
export { default } from "theme/UNSTABLE_routes/_main"; // ensures the component is preserved

Using this method you can also extend an existing layout route, for example

routes/_main.tsx
export * from "theme/UNSTABLE_routes/_main";
import MainLayout from "theme/UNSTABLE_routes/_main";

const ExtendedMainLayout = () => {
return (
<div>
<MainLayout />
<div>My custom content</div>
</div>
);
};

In the above example the <MainLayout> already contains an <Outlet> so you do not need to add it a second time.

caution

As indicated by the UNSTABLE_ prefix, this is an unstable API and may change.