passive-yellow

Route not active when using `redirect()` in `beforeLoad`

I'm using redirect in beforeLoad in my index.tsx route to navigate to a different route. This works but the activeProps to not get applied to that route. See the minimal repro below: https://stackblitz.com/edit/tanstack-router-redirect?file=src%2Froutes%2Findex.tsx

Owen Vey

StackBlitz

Redirect does not cause route to be active - StackBlitz

When using redirect in beforeLoad, it doesn't cause the route navigated to to be active.

20 Replies

other-emerald•11mo ago

can you please create a GitHub issue for this?

passive-yellowOP•11mo ago

Sure thing, on it!

other-emerald•11mo ago

oh wait why should this link be active? it cannot know you are redirecting

other-emerald•11mo ago

I think you are looking for https://tanstack.com/router/latest/docs/framework/react/api/router/RouterOptionsType#basepath-property

TanStack | High Quality Open-Source Software for Web Developers

Headless, type-safe, powerful utilities for complex workflows like Data Management, Data Visualization, Charts, Tables, and UI Components.

passive-yellowOP•11mo ago

ah yes that is what I need but now im noticing my middlewares aren't working. Let me see if I can reproduce in the stackblitz actually i don't think basepath is what I want because I don't want all the routes prefixed. In my actual app I have a /movies route and a /tv route. I don't really have a need for the / route and realize I could just put the movies stuff on the index route but I liked the consistency between the two. So I basically want the user to go /movies if the land on / which is why I used redirect(). That works great but I noticed the nav item wasn't highlighted then I was just unsure if I was missing something because in the router devtools it shows /movies as being matched after the redirect

passive-yellowOP•11mo ago

other-emerald•11mo ago

but then your link also has to point to /movies not to /

passive-yellowOP•11mo ago

as in the Movies link in the nav?

other-emerald•11mo ago

I think so, yes. maybe I misunderstood your problem though

passive-yellowOP•11mo ago

It does point to /movies. Just like in the repro i set up where the Home <a> in the nav points to /home but isn't being bolded after redirect({ to: '/home' });

other-emerald•11mo ago

maybe your repro was not saved properly? there is no movies

passive-yellowOP•11mo ago

repro is just stripped down version, same structure, just kept the URLs the same as the one in the docs but i can update it ahh okay, it's because in my app i have search={defaultMovieSearch} on that <Link> because I want to be able to click the Movies link to back to /movies to effectively clear all the query params. This wasn't happening without search={defaultMovieSearch} because of

search: {
    middlewares: [stripSearchParams(DEFAULT_MOVIE_SEARCH), retainSearchParams(true)],
  },

search: {
    middlewares: [stripSearchParams(DEFAULT_MOVIE_SEARCH), retainSearchParams(true)],
  },

removing search={defaultMovieSearch} from

<Link
  to="/movies"
  search={defaultMovieSearch}

>
  Movies
</Link>

<Link
  to="/movies"
  search={defaultMovieSearch}

>
  Movies
</Link>

fixes the issue with the Link not being active after redirect() so I guess I'm still trying to figure out a good way to clear query params. My "Clear" link is currently this

<Link to="/movies" search={DEFAULT_MOVIE_SEARCH}>
    Clear
</Link>

<Link to="/movies" search={DEFAULT_MOVIE_SEARCH}>
    Clear
</Link>

which works but if I were to do that on the Movies link in the navbar as I had above, it breaks the active styling I suppose what I'm looking for is a way to override retainSearchParams(true) in certain <Link/>'s activeOptions={{ includeSearch: false }} was the key!!! beautiful

other-emerald•11mo ago

glad you found a solution

passive-yellowOP•11mo ago

thanks for your help!

other-emerald•11mo ago

and also cool you already use the new middlewares

passive-yellowOP•11mo ago

i saw your tweets about them and they work beautifully together. Exactly what someone should want when doing a lot of filtering with search params

other-emerald•11mo ago

could you please update your reproducer to include the search middlewares etc? i want to check if this is a bug

other-emerald•11mo ago

I guess I was able to reproduce it here: https://stackblitz.com/edit/tanstack-router-redirect-vgfnge

Manuel Schiller

StackBlitz

Redirect does not cause route to be active (forked) - StackBlitz

When using redirect in beforeLoad, it doesn't cause the route navigated to to be active.

other-emerald•11mo ago

I fixed this bug in https://github.com/TanStack/router/releases/tag/v1.74.3

GitHub

Release v1.74.3 · TanStack/router

Version 1.74.3 - 10/20/24, 10:14 PM Changes Fix react-router: run search middlewares also on entering matches (#2603) (2127eac) by Manuel Schiller Packages @tanstack/react-router@1.74.3 @tanstac...

passive-yellowOP•11mo ago

confirmed this works on my end! thanks @Manuel Schiller

Gaming

Programming

Route not active when using `redirect()` in `beforeLoad`

Did you find this page helpful?