deep-jade

What's the naming convention needed for this deep route?

For context, although I have child and deep routes, which follow a hierarchal structure in the URL path, all the actual components/pages are independent of their parent(s) and do not get nested. My problem, is that while the /posts and /posts/$postId page are displayed, the /posts/$postId/deep page never gets rendered. Its all likely to do with the naming and how it affects the routeTree that's generated and help would be appreciated. Also, wouldn't it make sense to bubble up to the highest <Outlet /> since that gets rendered at the __root anyways? Stackblitz setup: https://stackblitz.com/github/SeanCassiere/testing-file-routing For reference, the routes folder is set up like this

routes/
    posts/  // route.tsx, component.tsx
    posts_.$postId/  // route.tsx, component.tsx
    posts_.$postId.deep/  // route.tsx, component.tsx
    __root.tsx
    index.route.tsx
    index.component.tsx

routes/
    posts/  // route.tsx, component.tsx
    posts_.$postId/  // route.tsx, component.tsx
    posts_.$postId.deep/  // route.tsx, component.tsx
    __root.tsx
    index.route.tsx
    index.component.tsx

StackBlitz

Seancassiere - Testing File Routing - StackBlitz

Run Testing File Routing created by Sean Cassiere on StackBlitz

10 Replies

deep-jadeOP•2y ago

PS: I've also tried adding an underscore after the path params (/posts_.$postId_.deep) but this didn't yield anything, since it expects that a path param name could end with an underscore. Weirdly enough, on the ts-level, it doesn't even acknowledge that $postId_ exists although it exists at runtime.

deep-jadeOP•2y ago

Tried this (/posts_.$postId.deep_) as well, and had no luck. Since only renders the component at /posts_.$postId.

deep-jadeOP•2y ago

@Manuel Schiller sorry to bug ya, but are you aware of the correct naming convention to use here?

extended-salmon•2y ago

sorry, no. how would it look like with code based routing?

deep-jadeOP•2y ago

Both of the following would be valid.

const Route tree = rootRoute.addChildren([
  postsPathRoute.addChildren([ // /posts
    postsIndexRoute, // /
    postIdPath.addChildren([ // $postId
      postIdIndexRoute, // /
      postIdDeepRoute // /deep
    ])
  ])
])

const Route tree = rootRoute.addChildren([
  postsPathRoute.addChildren([ // /posts
    postsIndexRoute, // /
    postIdPath.addChildren([ // $postId
      postIdIndexRoute, // /
      postIdDeepRoute // /deep
    ])
  ])
])

const Route tree = rootRoute.addChildren([
    postsIndexRoute, // /posts
    postIdIndexRoute, // /posts/$postId
    postIdDeepRoute // /posts/$postId/deep
])

const Route tree = rootRoute.addChildren([
    postsIndexRoute, // /posts
    postIdIndexRoute, // /posts/$postId
    postIdDeepRoute // /posts/$postId/deep
])

extended-salmon•2y ago

and what does the generator generate? maybe there is something missing in the generator...

deep-jadeOP•2y ago

Just ignore the blog stuff. https://github.com/SeanCassiere/testing-file-routing/blob/master/src/route-tree.gen.ts

GitHub

testing-file-routing/src/route-tree.gen.ts at master · SeanCassiere...

Contribute to SeanCassiere/testing-file-routing development by creating an account on GitHub.

deep-jadeOP•2y ago

One thing to note is that this code based config doesn't require nested routes to have an Outlet at each path route, since it matches the index routes of the path routes for /posts and /posts/$postId and bubbles it up to the root outlet.

deep-jadeOP•2y ago

Did some further messing around, and this definitely a bug or not documented how it would be achieved. Logged an issue here: https://github.com/TanStack/router/issues/1062

GitHub

bug(router-generator): invalid route-tree output when a for a URL n...

Describe the bug This issue is being created as a continuation of this thread (What's the naming convention needed for this deep route?) on the Tanstack Router Discord server. For context, alth...

deep-jadeOP•2y ago

Update: I think, I've found the correct naming convention to use, but the new RouteApi => useRouteContext() definitely has a bug. https://github.com/TanStack/router/issues/1062#issuecomment-1905118777

GitHub

bug(router-generator): invalid route-tree output when the URL shoul...

Describe the bug This issue is being created as a continuation of this thread (What's the naming convention needed for this deep route?) on the Tanstack Router Discord server. For context, alth...

Gaming

Programming

What's the naming convention needed for this deep route?

Did you find this page helpful?