Not able to get nesting in the route tree using file based directory routes [Codesandbox provided]
CSB - https://codesandbox.io/p/devbox/broken-leaf-6hnvrq
NOTE: This deployment is kind of slow so please be patient. Our API routes aren't super secure right now so I've created a temporary deployment of our backend to avoid any attacks on the prod and this deployment is running on some free tier compute so it is very slow. Even on login it takes a couple of seconds and we haven't put loading state on the login button
creds:
admin - pranjalakg.crf2p@gmail.com
student - csheanon1023@gmail.com
Password (for both) - HelloWorld123!
Stack - Vite react /w TS + shadcn-ui + react query + tanstack router + zustand (only for auth state management)
I have used directory routing as suggested in docs here https://tanstack.com/router/latest/docs/framework/react/guide/file-based-routing#directory-routes
But when I check the router dev tools my routes are flat (example in screenshot is from student -> edit page). I am probably missing something very basic here but can't seem to figure it out.
One thing I kind of did differently is that I've kept the pages in separate file instead of the route directly in case we have to reuse them and I just find it a bit cleaner. but I don't really think that makes much of a difference.
The main thing that I need help with is figuring out this nesting in routes because that has started to cause some issues.
also I want to use route context for breadcrumbs as suggested here in docs https://tanstack.com/router/latest/docs/framework/react/guide/router-context
but because of this nesting issue I am not able to do this.
Secondly I would really appreciate if someone can provide some feedback on how we can use react query and tanstack router better. I know I'm making some pretty basic mistakes in this project.
Like I know it is better to put all the queries and mutations in a hook or something rather than directly in the components.
Any feedback on how to use these 2 libraries better is very much appreciated.
NOTE: This deployment is kind of slow so please be patient. Our API routes aren't super secure right now so I've created a temporary deployment of our backend to avoid any attacks on the prod and this deployment is running on some free tier compute so it is very slow. Even on login it takes a couple of seconds and we haven't put loading state on the login button
creds:
admin - pranjalakg.crf2p@gmail.com
student - csheanon1023@gmail.com
Password (for both) - HelloWorld123!
Stack - Vite react /w TS + shadcn-ui + react query + tanstack router + zustand (only for auth state management)
I have used directory routing as suggested in docs here https://tanstack.com/router/latest/docs/framework/react/guide/file-based-routing#directory-routes
But when I check the router dev tools my routes are flat (example in screenshot is from student -> edit page). I am probably missing something very basic here but can't seem to figure it out.
One thing I kind of did differently is that I've kept the pages in separate file instead of the route directly in case we have to reuse them and I just find it a bit cleaner. but I don't really think that makes much of a difference.
The main thing that I need help with is figuring out this nesting in routes because that has started to cause some issues.
also I want to use route context for breadcrumbs as suggested here in docs https://tanstack.com/router/latest/docs/framework/react/guide/router-context
but because of this nesting issue I am not able to do this.
Secondly I would really appreciate if someone can provide some feedback on how we can use react query and tanstack router better. I know I'm making some pretty basic mistakes in this project.
Like I know it is better to put all the queries and mutations in a hook or something rather than directly in the components.
Any feedback on how to use these 2 libraries better is very much appreciated.
Headless, type-safe, powerful utilities for complex workflows like Data Management, Data Visualization, Charts, Tables, and UI Components.
Headless, type-safe, powerful utilities for complex workflows like Data Management, Data Visualization, Charts, Tables, and UI Components.
