TanStack•5mo 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/
  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

loader

, that returns crumb into the context, something like that:

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

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

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

My understanding was that

index.tsx

index.tsx

is the page to be rendered, and

route.tsx

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

/a/b/$c/index.tsx

into the browser.

But accessing

/a/b/$c

/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

$c/index.tsx

$c/route.tsx

$c/route.tsx

, the

/a/b/$c

/a/b/$c

shows correct info, but then I would get the exact same page for

/a/b/$c/$d

/a/b/$c/$d

as for

/a/b/$c

/a/b/$c

, because, I believe,

route.tsx

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) ?"

TanStack•5mo 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/
  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

loader

, that returns crumb into the context, something like that:

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

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

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

My understanding was that

index.tsx

index.tsx

is the page to be rendered, and

route.tsx

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

/a/b/$c/index.tsx

into the browser.

But accessing

/a/b/$c

/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

$c/index.tsx

$c/route.tsx

$c/route.tsx

, the

/a/b/$c

/a/b/$c

shows correct info, but then I would get the exact same page for

/a/b/$c/$d

/a/b/$c/$d

as for

/a/b/$c

/a/b/$c

, because, I believe,

route.tsx

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) ?"

optional param with required param route question

Similar Threads

optional param with required param route question

Similar Threads

Similar Threads

Similar Threads