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!