ambitious-aqua

directory routes

I have a question on directory routes: https://tanstack.com/router/latest/docs/framework/react/guide/route-trees#directory-routes looking at the posts directory with index and $postId.tsx should $postId be a child of the index route? What I'm seeing is that they are not a child, but they are a child when I define them as a flat route with:

posts.index.tsx
posts.$postId.tsx

posts.index.tsx
posts.$postId.tsx

I think the result should be the same, right ?

Route Trees & Nesting | TanStack Router Docs

Like most other routers, TanStack Router uses a nested route tree to match up the URL with the correct component tree to render. To build a route tree, TanStack Router supports both:

25 Replies

mere-teal•2y ago

should $postId be a child of the index route?

no.

, but they are a child when I define them as a flat route with:

strange, can you share your generated route tree please?

I think the result should be the same, right ?

yes, this are just two different syntactical ways to express the hierarchy

ambitious-aquaOP•2y ago

I have a reproduction here: https://stackblitz.com/edit/tanstack-router-mbf7xd?file=src%2Froutes%2Fshop.products.%24productId.tsx compare shop.products.$productId with shop2/products/$productId

Dominik Dorfmeister

StackBlitz

Router Quickstart File Based Example (forked) - StackBlitz

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

ambitious-aquaOP•2y ago

I'm basically trying to get the search params inherit feature (https://tanstack.com/router/latest/docs/framework/react/guide/search-params#search-params-are-inherited-from-parent-routes) working for directory routes

Search Params | TanStack Router Docs

Similar to how TanStack Query made handling server-state in your React applications a breeze, TanStack Router aims to unlock the power of URL search params in your applications. Why not just use URLSearchParams?

ambitious-aquaOP•2y ago

in the reproduction you can see that shop and shop2 behave differently when added as children to the root route:

export const routeTree = rootRoute.addChildren([
  IndexRoute,
  AboutRoute,
  ShopProductsRoute.addChildren([ShopProductsProductIdRoute]),
  Shop2ProductsProductIdRoute,
  Shop2ProductsIndexRoute,
])

export const routeTree = rootRoute.addChildren([
  IndexRoute,
  AboutRoute,
  ShopProductsRoute.addChildren([ShopProductsProductIdRoute]),
  Shop2ProductsProductIdRoute,
  Shop2ProductsIndexRoute,
])

mere-teal•2y ago

but neither of them are index routes

mere-teal•2y ago

I added the index route: shop.products.index.tsx https://stackblitz.com/edit/tanstack-router-ozgtjy?file=src%2FrouteTree.gen.ts

Manuel Schiller

StackBlitz

Router Quickstart File Based Example (forked) - StackBlitz

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

mere-teal•2y ago

export const routeTree = rootRoute.addChildren([
  IndexRoute,
  AboutRoute,
  ShopProductsRoute.addChildren([
    ShopProductsProductIdRoute,
    ShopProductsIndexRoute,
  ]),
  Shop2ProductsProductIdRoute,
  Shop2ProductsIndexRoute,
])

export const routeTree = rootRoute.addChildren([
  IndexRoute,
  AboutRoute,
  ShopProductsRoute.addChildren([
    ShopProductsProductIdRoute,
    ShopProductsIndexRoute,
  ]),
  Shop2ProductsProductIdRoute,
  Shop2ProductsIndexRoute,
])

the only difference is that shop.products.tsx exists, thus the ShopProductsRoute is created when you add route.tsx to shop2/products/:

export const routeTree = rootRoute.addChildren([
  IndexRoute,
  AboutRoute,
  Shop2ProductsRouteRoute.addChildren([
    Shop2ProductsProductIdRoute,
    Shop2ProductsIndexRoute,
  ]),
  ShopProductsRoute.addChildren([
    ShopProductsProductIdRoute,
    ShopProductsIndexRoute,
  ]),
])

export const routeTree = rootRoute.addChildren([
  IndexRoute,
  AboutRoute,
  Shop2ProductsRouteRoute.addChildren([
    Shop2ProductsProductIdRoute,
    Shop2ProductsIndexRoute,
  ]),
  ShopProductsRoute.addChildren([
    ShopProductsProductIdRoute,
    ShopProductsIndexRoute,
  ]),
])

it looks exactly the same

ambitious-aquaOP•2y ago

so instead of index.tsx, I should use route.tsx ?

mere-teal•2y ago

depends 😄

ambitious-aquaOP•2y ago

what does index.tsx do then 😅 ?

mere-teal•2y ago

index.tsx is rendered when you access /shop/products/ without any $productId in the path $productId.tsx is rendered when you access /shop/products/123 route.tsx is rendered in both cases

ambitious-aquaOP•2y ago

oooh

mere-teal•2y ago

https://tanstack.com/router/latest/docs/framework/react/guide/route-matching

Route Matching | TanStack Router Docs

Route matching follows a consistent and predictable pattern. This guide will explain how route trees are matched. When TanStack Router processes your route tree, all of your routes are automatically sorted to match the most specific routes first. This means that regardless of the order your route tree is defined, routes will always be sorted i...

ambitious-aquaOP•2y ago

that's actually super nice

mere-teal•2y ago

does this explain it?

ambitious-aquaOP•2y ago

so route.tsx is kind of a shared layout ?

mere-teal•2y ago

yes router renders the whole route hierarchy all the time in a nested way first __root, then shop, then products, ...

ambitious-aquaOP•2y ago

love it. I just thought I need a layout.tsx or something for that - I have seen _layout somewhere 🤔

mere-teal•2y ago

you can use _layouts for this. the only difference is that layout routes are NOT part of URL

ambitious-aquaOP•2y ago

one more 😅 . it seems that I can pass params when navigating to a route that doesn't take path params, like so:

navigate({ to: "/about", params: { id: 5 } });

navigate({ to: "/about", params: { id: 5 } });

shouldn't there be a type error? The params have the type:

(property) params?: true | ParamsReducer<never, MakeDifferenceOptional<never, {}>> | undefined

(property) params?: true | ParamsReducer<never, MakeDifferenceOptional<never, {}>> | undefined

I get the same for the Link component 🤔

mere-teal•2y ago

did you specify a from value? btw navigate and Link share the same code so it's expected they behave the same way ParamsReducer<never, MakeDifferenceOptional<never, {}>> reduces (ha 🙂 ) to {} ... so you can pass in everything you want ideally it would result in a type error, yes

ambitious-aquaOP•2y ago

I did not specify a from value. So is this something that would need to be fixed in the router typings, right ?

mere-teal•2y ago

yes but I don't see a "real" problem here those params will just be dropped

ambitious-aquaOP•2y ago

k I'm thinking it would be nice to have type errors when you e.g. remove a search param from a route so that you don't leave dead code behind

mere-teal•2y ago

i am on it if you remove a single search param, but others are still existing, you will already get an error however if you remove all of them, currently you don't get an error I think this is a breaking change ... so we will only to introduce it in 2.0

Gaming

Programming

directory routes

Did you find this page helpful?