How to have multiple layouts?

[gabrielvincent]

I'm a little confused with the v2 route convention. My goal is to have 3 different layouts in the same app: one for marketing pages (home, faq, contact, pricing), one for auth pages (login, signup, checkout) and one for the user dashboard, which is only accessible after the user is authenticated.

Where should I define each layout? This is my routes/ directory:

_index.tsx
auth.login
auth.signup
checkout.tsx
contact.tsx
dashboard.tsx
faq.tsx
pricing.tsx

I would like to share the same layout, with a header and a footer between _index.tsx, contact.tsx, faq.tsx and pricing.tsx. One way I found to achieve this is to create a _mkt.tsx route and nest all of those pages under _mkt like _mkt._index.tsx, _mkt.faq.tsx, _mkt.pricing.tsx. This is the layout route:

// routes/_mkt.tsx

export default function MktLayout() {
  return (
    <>
      <Header />
      <main>
        <Outlet />
      </main>
      <Footer />
    </>
  );
}

While this works, I'm not sure this is the best approach. I doesn't feel right to have the home page of the site under a route _mkt._index.tsx.

I could move that layout to app/root.tsx, but then it would be applied to every route, including auth and dashboard routes, which I want to have separate layouts for each.

[kiliman]

There are a couple of ways to share a layout.

As you state above, the Remix way is to create a layout file (prefix with _ if you don't want to include it in the path).

// routes/_mkt.tsx

export default function MktLayout() {
  return (
    <>
      <Header />
      <main>
        <Outlet />
      </main>
      <Footer />
    </>
  );
}

Then, all the routes you want to share that layout with must have that layout as part of the filename. So _mkt.tsx is the layout, and the home page would be _mkt._index.tsx. Remix will render the index route in the <Outlet> of the _mkt layout.

You can also do it the React way by simply importing the shared layout component. Remember, layouts are basically React components, and <Outlet/> is like the children prop.

// layouts/_mkt.tsx

export default function MktLayout({children}) {
  return (
    <>
      <Header />
      <main>
        {children}
      </main>
      <Footer />
    </>
  )
}

// routes/_index.tsx
import MktLayout from '~/layouts/_mkt'

export default function HomePage() {
  return (
    <MktLayout>
      <HomePageContentsHere/>
    </MktLayout>
  )
}

The main drawback to this approach is that the layout is not treated as a route, so it won't be able to have its own loader or action.

A third option is to use remix-flat-routes, which has a hybrid routes model.

You can create a file structure like this:

app/routes
├── _mkt+
│   ├── _index.tsx
│   ├── _layout.tsx
│   ├── contact.tsx
│   ├── faq.tsx
│   └── pricing.tsx
├── auth+
│   ├── _layout.tsx
│   ├── checkout.tsx
│   ├── login.tsx
│   └── signup.tsx
└── dashboard.tsx

The + suffix lets you organize your flat routes into folders. For layout routes, _mkt+/_layout.tsx is the same as _mkt.tsx.

[gabrielvincent]

Thank you for your suggestions. I think the best approach to me is to create layout components that receive children. Remix never stops surprising me with how simple things are while I keep trying to come up with complex solutions. I guess this is the result of years of working around a lot of complexity from other frameworks.

I'll definitely check out remix-flat-routes!

[nem95]

Is there any options avoiding using this thierd party lib ?

[kiliman]

Sure. With the default Remix route convention, you just have to prefix your routes with the shared layout.

_app.tsx  <-- custom layout
_app.route-1.tsx
_app.route-2.tsx
_mkt.tsx  <-- custom layout
_mkt.route-3.tsx
_mkt.route-4.tsx
_public.tsx  <-- custom layout
_public.route-5.tsx
_public.route-6.tsx