How should I handle the case where my layout and index routes look the same?

[silvenon]

I'm sure this has been asked before, but I wasn't sure how to look for it, and it remains the only awkward part of routing I'm encountering so far.

The problem: I have an index page, like a dashboard, and some of my routes build on top of it, i.e. they share the same layout.

I can't use an index route because they cannot have children. The following workaround seems to work:

route("", "dashboard.tsx", [
  route("another", "another.tsx"),
])

but is weird because the parent route is obviously an index route, so I'm not sure how index routes and routes with an empty string are different, besides the ability to have children.

I could also create a layout route with an empty index route:

layout("dashboard.tsx", [
  index("dashboard-empty-index.tsx"),
  route("another", "another.tsx"),
])

Here dashboard-empty-index.tsx exports an empty component.

Obviously both of these solutions are workarounds, the latter feels better because I have an index route, but still wrong because it's empty. What is the "correct" way to solve this problem?

[sergiodxa]

route("", "dashboard.tsx", [
  route("another", "another.tsx"),
])

This should allow / to only render the dashboard and /another to render both

[silvenon]

So this is not a problem? There's nothing special about index routes aside from prohibiting children and not having to specify route names?

[silvenon]

I guess my real question is why index routes don't allow children.

[sergiodxa]

Yeah an index route is a route that has not children, so it's always a leaf route

Consider a route like adding /dashboard and then the index inside is /dashboard/, so you have

• /dashboard <- layout
• /dashboard/ <- index
• /dashboard/another <- another route

Using index is just a way to say "the route tree ends here"