fair-rose

Nested Directories with pathless underscore route not resolving path strings

Heya, I'm not sure if this is intended or simply a restriction of that approach but I wanted to structure my routes with folders like so:

- _auth
  - dashboard
    - index.lazy.tsx
  - products
    - $productNumber.tsx
    - index.lazy.tsx
- __root.tsx
- logout.tsx
- no-access.tsx

- _auth
  - dashboard
    - index.lazy.tsx
  - products
    - $productNumber.tsx
    - index.lazy.tsx
- __root.tsx
- logout.tsx
- no-access.tsx

However, when I try to use <Navigate to="..." or redirect({ to: "..." it will only resolve the route paths that are not below _auth being "/", "logout" and "no-access". As soon as I structure those routes flat via _auth.products.index.lazy.tsx it gets resolved just fine. Is this intended? Am I doing something wrong here? I wondered if this is because I'm using index.tsx routes that also need to end with a "/" while flat route file paths end without "/" so I guess there is some kind of difference at least? All my routes are built like this:

export const Route = createLazyFileRoute("/_auth/products/")({
  component: ProductsPage,
});

export { Route as ProductsRoute };

export const Route = createLazyFileRoute("/_auth/products/")({
  component: ProductsPage,
});

export { Route as ProductsRoute };

12 Replies

genetic-orange•2y ago

That looks about right and really shouldn't matter. Try adding a _auth.tsx file on the same level as the layout folder. If that doesn't do anything, could you add a minimal reproduction of this into Stackblitz link and post it here. It's nighttime here, but I could take a look at it when I'm up.

fair-roseOP•2y ago

That was it! Thank you! Adding a _auth.tsx file on the same Level with the code below did the trick!

export const Route = createFileRoute("/_auth")({
  component: AuthRoute,
});

export { Route as AuthRoute };

export const Route = createFileRoute("/_auth")({
  component: AuthRoute,
});

export { Route as AuthRoute };

genetic-orange•2y ago

You shouldn't need that bottom export.

fair-roseOP•2y ago

Yes but I want to make it a habit because when I want to use useParams or other hooks on the route I don't need to distinguish 10 "Route" imports but instead can just import "AuthRoute"

genetic-orange•2y ago

You simplify it further by not importing it at all. The getRouteApi helper function just needs a string passed into it to return the routeApi with it's hooks.

genetic-orange•2y ago

https://tanstack.com/router/latest/docs/framework/react/api/router/getRouteApiFunction

getRouteApi function | TanStack Router Docs

The getRouteApi function provides type-safe version of common hooks like useParams, useLoaderData, useRouteContext, and useSearch that are pre-bound to a specific route ID and corresponding registered route types. Options

genetic-orange•2y ago

Plus it eliminates any risk of circular imports

fair-roseOP•2y ago

Ooh I didn't know about that.. In the examples e.g. https://tanstack.com/router/latest/docs/framework/react/guide/path-params#path-params-in-components it shows it by referencing the Route directly

Path Params | TanStack Router Docs

Path params are used to match a single segment (the text until the next /) and provide its value back to you as a named variable. They are defined by using the $ character prefix in the path, followed by the key variable to assign it to. The following are valid path param paths: $postId

genetic-orange•2y ago

Yea the docs need some updating. I honestly haven't gone through the docs in a while

fair-roseOP•2y ago

I'll keep that in mind :) Sounds a lot better than importing the routes all over.. Thank you!

genetic-orange•2y ago

Yup yup yup! Since typescript will toss a nuke if you name something wrong anyways with the strings it'll cut down on those pesky imports. Also, if you could please mark this thread as resolved by pressing the green check ✅ on the original post it'll be helpful for the maintainers answering questions.

fair-roseOP•2y ago

Done :)

Gaming

Programming

Nested Directories with pathless underscore route not resolving path strings

Did you find this page helpful?