flat-fuchsia

Type of children's route params in parents

I've got the following routes: - _layout.tsx - _layout.$orgId.tsx The params in _layout.tsx's loader seem to include the orgId param, but it's not reflected in the type. Am I missing something?

16 Replies

conscious-sapphire•2y ago

which "type" do you mean?

flat-fuchsiaOP•2y ago

Ah yeah, the layout component is:

export const Route = createFileRoute('/_layout')({
  loader: ({ params }) => {
    console.log('Layout loader', params);
  },
  component: Layout,
});

export const Route = createFileRoute('/_layout')({
  loader: ({ params }) => {
    console.log('Layout loader', params);
  },
  component: Layout,
});

in which TypeScript says that params: {} but if I console log it, it's params: {orgId?: string}, depending on if I'm int the orgId route

conscious-sapphire•2y ago

console.log prints typescript types?

flat-fuchsiaOP•2y ago

No, console log prints the value of orgId

conscious-sapphire•2y ago

yeah, so you get alle the params passed into the loader but the types only contain its own and the parent params not the children's

flat-fuchsiaOP•2y ago

Alright, thanks. Any way to type-safely access children's param's in a loader?

conscious-sapphire•2y ago

hm may I ask why you need this?

flat-fuchsiaOP•2y ago

Sure! I'm building breadcrumbs for a navigation bar

conscious-sapphire•2y ago

why don't you access them were you definitely have them, which is inside the child route?

flat-fuchsiaOP•2y ago

If the navbar is in the layout I'd like to access the params in it so I can get correct names there Imagine GitHub's navbar, the way they have organization and repo names

conscious-sapphire•2y ago

why do this in the loader though?

flat-fuchsiaOP•2y ago

So a type safe way would probably be to create one layout per breadcrumb level

conscious-sapphire•2y ago

did you have a look at existing solutions such as https://discord.com/channels/719702312431386674/1212937398908878848/1212943406607761488 ?

flat-fuchsiaOP•2y ago

Thought it would be nice to not have content shifting, but just started experimenting with Tanstack Router so no real idea I did not in fact! Thanks for the link

conscious-sapphire•2y ago

breadcrumbs are occurring quite a lot, so please search this channel to get an overview

flat-fuchsiaOP•2y ago

I'll do that, thanks

Gaming

Programming

Type of children's route params in parents

Did you find this page helpful?