TanStackT
TanStack•3mo ago•
12 replies
foolish-indigo

optional param with required param route question

I have this folder structure
a/
  index.tsx
  route.tsx
  b/
    index.tsx
    route.tsx
    $c/
      index.tsx
      route.tsx
      $d.tsx


a/route.tsx and b/route.tsx and $c/route.tsx are only having 
loader
, that returns crumb into the context, something like that:

export const Route = createFileRoute(
  "/a"
)({
  loader: ({ context }) => ({ crumb: "A" }),
});


( I need this in order to create correct breadcrumbs.)

My understanding was that index.tsx is the page to be rendered, and route.tsx - is kind of layout if needed, but optional.
so in my mind, accessing /a/b/$c would effectively render the /a/b/$c/index.tsx into the browser.

But accessing /a/b/$c gives an empty page...
Tanstack Router devtools shows correct matches. The only thing slowly driving me crazy is that the page is empty...

If I move the stuff from $c/index.tsx to $c/route.tsx, the /a/b/$c shows correct info, but then I would get the exact same page for /a/b/$c/$d as for /a/b/$c, because, I believe, route.tsx is used as layout...

I think my question boils down to:
"How to make nested pages with multiple parameters, like /a/b/$c/$d, and also be able to access in-between pages as well (/a/b/$c) ?"
Was this page helpful?