flat-fuchsia

Opting out of parent layout(s) in child route?

Is there a way to opt-out of the parent layout(s) from a child route using the file-based router? Take this structure for example:

-dashboard
– _root.tsx
– _other.tsx
– _root._other.customers <--- Directory for grouping
–––– index.tsx
–––– $customerId.tsx <-- This should only have the `_root` layout, but not the `_other` layout

-dashboard
– _root.tsx
– _other.tsx
– _root._other.customers <--- Directory for grouping
–––– index.tsx
–––– $customerId.tsx <-- This should only have the `_root` layout, but not the `_other` layout

Is there some way to opt out of _other layout for the path of /dashboard/customers/$customerId while keeping it in the same file structure? Keep in mind, _other is used by other routes as well (say customers and orders), but shouldn't be used by some of the nested ones (like customers/$customerId or orders/$orderId)

13 Replies

wee-sapphire•2y ago

You are probably looking for this:

_ Suffix Routes segments with the _ suffix exclude the route from being nested under any parent routes.

https://tanstack.com/router/latest/docs/framework/react/guide/file-based-routing#file-naming-conventions

TanStack Router Docs

wee-sapphire•2y ago

checkout posts_.$postId.deep.tsx in this example https://stackblitz.com/github/tanstack/router/tree/main/examples/react/basic-file-based?embed=1&theme=dark&preset=node

StackBlitz

Router Basic File Based Example - StackBlitz

Run official live example code for Router Basic File Based, created by Tanstack on StackBlitz

flat-fuchsiaOP•2y ago

I have that. Isn’t that for layout? Say a page with tabs where each tab gets its own route. Also i only want to opt out of one layout, but keep the “root” layout with the main navigation. Is that possible?

generous-apricot•2y ago

Layout using an underscore (_) as a prefix, whilst the underscore as a suffix opts you out of being part of that route. Consider these routes,

src/routes
  posts.tsx
  posts.index.tsx
  posts.$postId.tsx
  posts_.$postId.edit.tsx

src/routes
  posts.tsx
  posts.index.tsx
  posts.$postId.tsx
  posts_.$postId.edit.tsx

The posts_.$postId.edit.tsx route will not share any of shared layout used by the /posts route.

flat-fuchsiaOP•2y ago

What should I name my $customerId thing so that it does not use the _main layout but uses _root, while still being inside the customers folder? Or is this an anti-pattern?

flat-fuchsiaOP•2y ago

I've ran out of permutations on my own :LULW:

wee-sapphire•2y ago

I don't see any _ suffix being used?

flat-fuchsiaOP•2y ago

so $customerId_.tsx?

wee-sapphire•2y ago

_root._other_.customers.$customerId.tsx notice the _other_ however, if you just want to use the folder for route grouping, I'd rather use route groups

wee-sapphire•2y ago

flat-fuchsiaOP•2y ago

But then this doesn't work: '/dashboard/(customers)/_root/_main/customers' I have to put _root._main in the (customers) folder name for it to work. Otherwise the layouts do not get applied Like, how do you even reference layouts that are not in the same directory?

wee-sapphire•2y ago

I don't get the problem fully, would need a minimal complete example. can you fork one of the existing examples on Stackblitz to show your current route setup and then describe in detail what you want to achieve?

flat-fuchsiaOP•2y ago

Will do! Thanks for your patience!

Gaming

Programming

Opting out of parent layout(s) in child route?

Did you find this page helpful?