Route structure

[tawny cobalt]

Hi! I’m using Router and so far it's been great, easy to understand and all that.

I’m trying to set up something more complicated (for me) though and I am not sure I understand how I should go about it with Tanstack Router.

So the relevant structure is like this:
/routes

-> tasks.$taskId.tsx

-> tasks.completed.tsx
-> tasks.tsx

-> tasks.view.component.tsx

I am kind of wanting tasks.tsx to be the “layout” of my task stuff. And show like a default view (tasks.view.component) when they are at url.com/tasks .

But if they’re at another path (url.com/tasks/completed) I want it to use the Outlet (in tasks.tsx) to show the content at tasks.completed.tsx. Or if they’re at url.com/tasks/2 to show the content at tasks.$taskId.tsx.

A pointer to what I'm needing in the docs would be great, or if I'm thinking about the wrong way then let me know!

[calm seal]

In the docs, the File Naming Conventions (under File-Based Routing) and Code-splitting guides are pretty good.

https://tanstack.com/router/latest/docs/framework/react/guide/file-based-routing#file-naming-conventions
https://tanstack.com/router/latest/docs/framework/react/guide/code-splitting

Also, just to confirm. Everything under under the /tasks directory is nested within the <Outlet /> for the tasks route yes? Like the /posts route examples in the docs.

[tawny cobalt]

I was simply missing a tasks.index.tsx - once I added that, it works like I wanted. Skill issue 🙂 Thanks for the reply @calm seal

[calm seal]

No worries. I recent became aware of it myself just a few days back.

You may face an error being thrown when consuming the useRouteContext and useSearch hooks from the getRouteApi method for that index route.