Different routes based auth status
I want to be able to define two different route trees that uses the same base path depending on route status and these two different trees need to merge with the non grouped routes. I can kinda see how to do it with code based routing but is it possible to mix this kind of system with file based routing?
15 Replies
other-emerald•9mo ago
Can you provide a bit more info? I’m not sure I’m understanding what exactly you mean.
like-goldOP•9mo ago
I want to serve different pages to the users on the same routes depending on their auth status. apart from those pages they will still see the same routes
my main idea is the root page like github if you are not signed in you see the marketing page but if you are signed in you see the dashboard
but there will be more pages so my plan was to group these oages and on the root route select the group
other-emerald•9mo ago
So something like this?
like-goldOP•9mo ago
yes
other-emerald•9mo ago
How do you get the user information? Router context?
like-goldOP•9mo ago
yes context
other-emerald•9mo ago
Probably the simplest option is to use the loader to provide the page whatever user info you need and then conditionally render the components of the admin or user dashboard.
I'll look and see if that could be done using layouts. It sould be really cool if it can be used that way since I've had similar needs.
like-goldOP•9mo ago
my idea was to group the routes kind of like remix (not sure the equivelant in tanstack) like (auth), (anon) folders and somehow switch the group based on the context value
i will just do these routes manually I guess since I don't think file routes have this kind of flexiblity
other-emerald•9mo ago
When you do get something working, would you mind sharing what you did? I'm just curious.
like-goldOP•9mo ago
ok sure
like-goldOP•9mo ago
hmm it seems like virtual file routes and this might be a good combo to make this feature work https://tanstack.com/router/latest/docs/framework/react/guide/router-context
Router Context | TanStack Router React Docs
TanStack Router's router context is a very powerful tool that can be used for dependency injection among many other things. Aptly named, the router context is passed through the router and down throug...
like-goldOP•9mo ago
the part I am wonderinng is if it would make sense to dynamically replace the router instance
it seems like I am doing something complex for no reason . I eill just check the context at the the route and render teo different page components directly without messing with the router
other-emerald•9mo ago
Yeah. That’s pretty much how I ended up at the same conclusion 😄😆
IIRC router doesn’t like conditionally rendered/declared routes. That was where I gave up and decided to conditionally render the components
vicious-gold•9mo ago
You could return context in the layout route, and then in the route render based on context. Or do it all in a before load/loader in the route itself, and return a variable to use to do the switch.
other-emerald•9mo ago
Yup