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:

• _main.tsx
• _main.user.tsx
• _main.user.orders.tsx
• checkout.tsx

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. It is at the moment not possible to reuse functions from the original route without copying and pasting its logic over to your new route file.