Redirect in loader causes infinite loop
Hi,
Basically I want to throw a redirect in the loader function based on some server result. The thing is, the loader is implemented on a dynamic route segment.
Given the following path:
- /
- /model
- - /$model_id
- - - /general
- - - /details
The loader is implemented on the model id route to avoid duplicating the calls when visiting the relative children. Now, whenever I redirect I end up in an endless loop.
How can I achieve this? Hopefully not only by comparing e.g. pathname or similar? Does the parent route loader trigger on purpose when visiting a child?
Any help would be much appreciated!
11 Replies
ambitious-aqua•13mo ago
We'd need a workable reproduction for this showing off this endless redirect.
rare-sapphireOP•13mo ago
@Sean Cassiere There you go. https://stackblitz.com/edit/github-wdwiyf?file=src%2Fmain.tsx
Just click on the model navigation entry, then click on the link which transitions to a parent model route, whereas the loader should redirect to a more specific child. The loader does nothing more than redirect and results in an endless loop of the loader.
lukasbash
StackBlitz
Router Quickstart Example - StackBlitz
Run official live example code for Router Quickstart, created by Tanstack on StackBlitz
metropolitan-bronze•13mo ago
Does the parent route loader trigger on purpose when visiting a child?yes because the child can access its parents' loader data
How can I achieve this? Hopefully not only by comparing e.g. pathname or similar?I don't see another way currently. if you have a nicer idea we might be able to implement it. how would you like to do it?
ambitious-aqua•13mo ago
Always redirecting from a parent match to child match wouldn't ever work since the parent match would always be present.
In your instance, what you were looking for was just to always redirect
/model/$modelId/ to /model/$modelId/general.
So, you just need to make you create an index match which handles the redirection.
https://stackblitz.com/edit/github-wdwiyf-vxxcbu?file=src%2Fmain.tsx
I did a bit of refactoring, splitting modelRoute and modelIdRoute since your styling didn't account for them being nested and pointed both their parent routes to rootRoute.
You can ofc, undo that bit and just add an <Outlet /> in the modelRoute achieve that style of layout.Sean Cassiere
StackBlitz
Router Quickstart Example (forked) - StackBlitz
Run official live example code for Router Quickstart, created by Tanstack on StackBlitz
ambitious-aqua•13mo ago
The equivalent of what's happening here is throwing a
redirect in the loader in the postsIndexRoute
https://github.com/TanStack/router/blob/68bf2f85f367d74847a6cf80f4f4f339b1c6d803/examples/react/basic/src/main.tsx#L91-L95GitHub
router/examples/react/basic/src/main.tsx at 68bf2f85f367d74847a6cf8...
🤖 Fully typesafe Router for React (and friends) w/ built-in caching, 1st class search-param APIs, client-side cache integration and isomorphic rendering. - TanStack/router
metropolitan-bronze•13mo ago
In your instance, what you were looking for was just to always redirect /model/$modelId/ to /model/$modelId/general. So, you just need to make you create an index match which handles the redirection.I don't think that is the case, I also thought this but then re-read the first sentences here:
Basically I want to throw a redirect in the loader function based on some server result.in this case, the index route would not be visited. instead, he wants to move the backend call in the common parent or maybe I misunderstood that as well 😄 @lukasbash777 please clarify
rare-sapphireOP•13mo ago
So I actually want to cover multiple scenarios. Maybe I can clarify my needs a bit:
Case 1:
When visiting
/models/$model_id there are two options. Either the model has not been opened before, then go to general. Consider it has been opened before in let's say the details view, it should redirect to details (I store this in an external client state).
Case 2:
All the routes (yes all of them) should be accessible via deep link. So I have to ensure the model data to be loaded when visiting any of those routes. Preferably without duplicating the loader code. Here, the model data from the server might contain some data/flags that I have to force redirect to some other model child-route.
Does this explain my need? Do you think this is covered with your suggestions? @Manuel Schiller @Sean Cassiere
Thanks a lot for the answers so far!ambitious-aqua•13mo ago
Case 1 IMO could be solved with the index route check
model.$modelId.index.tsx
but both of these scendarios are complex enough that you probably should be offloading this logic to a state-machine with some state-caching to determine the redirects and their resolved state.
The reason why you can't redirect in model.$modelId.tsx (or its other equiv model.$modelId.route.tsx) to a child is because it is matched at ALL times. Redirection works when its to one of its own siblings or itself (with differing params). Hence why the index configured redirection works, but the route configured redirection doesn't.
@Manuel Schiller Not being able to redirect to routes child when said route is always matched should probably be called out. Maybe in the route matching guide?
Any idea on the verbiage to use here?metropolitan-bronze•13mo ago
i mean you CAN redirect to a child
but you must avoid the infinite loop
e.g. via checking the path
rare-sapphireOP•13mo ago
I am currently changing all the implementations to your suggestion with the index route. So far no issues ...
But wouldn't this be something that the package itself can check? For sure there is a way to check whether a route call came from a redirect, and then, if it was the route itself. Don't you think it is a valid use-case to redirect fully independent to the route tree? Upwards, downwards, through siblings, etc ..
ambitious-aqua•13mo ago
Responded in the GitHub issue that was opened.
https://github.com/TanStack/router/issues/2142#issuecomment-2295518011
GitHub
Redirect in loader causes infinite loop · Issue #2142 · TanStack/ro...
Describe the bug Given the situation that any parent route's loader implements some mechanism to redirect to a more precise child route, the redirect throw causes an endless loop as the parents...