T
TanStack5mo ago
optimistic-gold

Layout route

I have a route /account that has two children so /account/settings and /account/edit. I'm using file based routing:
routes/
├── account/
│ ├── route.tsx
│ ├── settings.tsx
│ ├── edit.tsx
routes/
├── account/
│ ├── route.tsx
│ ├── settings.tsx
│ ├── edit.tsx
What I want is the route /account to not be reachable but only child routes and keep account in the url. I tried to redirect to /account/settings in the route.tsx file in a loader or beforeLoad but it gives me an error of too many redirects so I ended up with this solution so if user want to access /account the notFound component is rendered
routes/
├── _account/
│ ├── route.tsx
│ ├── account/
│ ├── settings.tsx
│ ├── edit.tsx
routes/
├── _account/
│ ├── route.tsx
│ ├── account/
│ ├── settings.tsx
│ ├── edit.tsx
Not sure that this is the right way, maybe someone could give me some advice here ? thanks
4 Replies
quickest-silver
quickest-silver5mo ago
Try adding routes/account/index.tsx and redirect to settings in beforeLoad About the too many redirects, I think going from /account to /account/setting will make the beforeLoad of /account run again, causing an infinite loop, if you check the current url and only redirect if it's exactly /account maybe it will work without the index file
optimistic-gold
optimistic-goldOP5mo ago
OK, both solutions work ! Thank you !
sensitive-blue
sensitive-blue5mo ago
I've done something like this as well, it works, however I am trying to get the tabs in the index.tsx to show, and added an <outlet> but it just goes to the parameter page no tab
sensitive-blue
sensitive-blue5mo ago
No description

Did you find this page helpful?