Seeking Advice on Implementing Nested Routes with Specific Layouts in Remix

[GOWxx]

Hello everyone,

I've encountered a situation during my development with Remix and am seeking discussions and help.

I have content in root.tsx or routes/index.tsx that includes the <Outlet /> component, with several routes set up as follows:

URL	Matched Route
/	app/routes/_index.tsx
/contact	app/routes/contact.tsx

In this setup, navigating to / displays the content from app/routes/_index.tsx, and navigating to /contact displays the content from app/routes/contact.tsx.

However, I'm looking for a way to achieve a slightly different routing effect:

URL	Matched Route
/	app/routes/_index.tsx
/contact	app/routes/_index.contact.tsx
/about	app/routes/about.tsx

• Navigating to / should display content from app/routes/_index.tsx.
• Navigating to /contact should display content from app/routes/_index.contact.tsx, with the contact content displayed within the parent component via <Outlet />, with codes around app/routes/_index.tsx.
• Navigating to /about should display content from app/routes/about.tsx, without codes around app/routes/_index.tsx.

My intention behind this design is to use a base layout for certain pages, which can be determined by the routing conventions based on file naming.

Currently, if I have these two files in app/route: _index.tsx and _index.contact.tsx, I encounter an error:

URL	Matched Route
/	app/routes/_index.tsx
/contact	app/routes/_index.contact.tsx

Error message:

Index routes must not have child routes. Please remove all child routes from route path "/".

To achieve my goal, I considered passing a value through context to the parent component to decide whether to use a specific layout or surrounding code. However, I'm wondering if there's a better approach. I believe that using file naming conventions for routing would be more intuitive, but my attempts so far have been unsuccessful. Does anyone have suggestions on how I might achieve this?

Thank you for your time and assistance.

[JUNIORCO]

_layout.tsx will be useful here. It's not documented on the Remix docs but you can find some discussions about it.

See this: #7296

[GOWxx]

Yes, this is indeed helpful, thank you for the information you provided, thank you!

[sergiodxa]

As the error said, an index route can't have child routes, this is because index is always a leaf route (the last one, in this case /).

What you need is to create a pathless layout route that can have your shared layout.

app/routes/_layout.tsx <- here place your layout and <Outlet />
app/routes/_layout._index.tsx <- nested inside the layout, handles /
app/routes/_layout.contact.tsx <- nested inside the layout, handles /contact

I also like to name my global layout as _.tsx so the folder structure would look like this:

app/routes/_.tsx <- here place your layout and <Outlet />
app/routes/_._index.tsx <- nested inside the layout, handles /
app/routes/_.contact.tsx <- nested inside the layout, handles /contact

The reason I do this is because the layout name will be repeated a lot so I prefer to use a short name, _ is the shortest it can be.

[GOWxx]

Thank you so much for your help; the solution you provided was particularly useful and solved my problem. based on my practical situation, I'd like to add a bit of information:

• app/routes/_.tsx <- here place your layout and <Outlet />
• app/routes/_._index.tsx <- nested inside the layout, handles /
• app/routes/_.contact.tsx <- nested inside the layout, handles /contact, with layout
• app/routes/about.tsx <- nested outside the layout, handles /about, without layout

This aligns perfectly with what I initially envisioned. I needed a way to differentiate whether top-level routes use the same layout or not by using file naming conventions. It's perfect!

Additionally, the short name _.tsx is a fantastic method that I've fallen in love with after just one use. Thank you for your guidance and advice!

[dani-sanomads]

Thanks for sharing it with us, @sergiodxa .

[somias]

Thanks for sharing @sergiodxa and @GOWxx. Helped me too!

[PatrickLeahey]

This is great - thanks for sharing

[hanford]

This also helped me, thank you!

[ryansobol]

So the key insight from this discussion is that _._index.tsx is basically a routing placeholder. It exists just to tell Remix "yes, / is a valid route" but doesn't actually render anything. All your main content moves to _.tsx instead. Here's a concrete example:

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

export default function Layout() {
  return (
    <>
      {/* This is what used to be in _index.tsx */}
      <div>Always visible content!</div>
      
      <Outlet />
    </>
  );
}

// app/routes/_._index.tsx
export default function Index() {
  // Empty component that just establishes "/" as a valid route
  return null;
}

// app/routes/_.contact.tsx
export default function Contact() {
  return <div>Additional content for the /contact route</div>;
}