Route structure
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!
3 Replies
modern-teal•2y ago
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.Code Splitting | TanStack Router Docs
Code splitting and lazy loading is a powerful technique for improving the bundle size and load performance of an application.
Reduces the amount of code that needs to be loaded on initial page load
File-Based Routes | TanStack Router Docs
Most of the TanStack Router documentation is written for file-based routing. This guide is mostly intended to help you understand in more detail how to configure file-based routing and the technical details behind how it works.
Prerequisites
genetic-orangeOP•2y ago
I was simply missing a tasks.index.tsx - once I added that, it works like I wanted. Skill issue 🙂 Thanks for the reply @Sean Cassiere
modern-teal•2y ago
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.
Let us know, if that happens.