Redirect to same route with different params?

[bzbetty]

Is there a build in way to redirect to same route but with different params?

eg going from /teams/1 to /teams/2 but in a generic way that would also work for /teams/1/players to /teams/2/players (I have a dropdown at a higher level that I want to be able use to switch with independant of which page)

I tried

navigate({ to: "/" + match.route.id?.replace(":team", newId) })

but it feels a bit jank (technical term) and while it does update the browser url it doesn't seem to rerender immediately (like react isnt' detected the redirect).

Currently getting around that issue using a bounce page to force more of a url update (which seems to work).

[tannerlinsley]

Can you make a CodeSandBox with this so I can debug it? Seems like it should work

[bzbetty]

hmm a simple example does seem to work in sandbox, i must be doing something weird in my code.

Will need to try make a more elaborate example.

[bzbetty]

Narrowed it down to having WhyDidYouRender enabled for a component and calling useNavigate in that component.

Demo: https://codesandbox.io/s/summer-worker-yj2n4g?file=/src/App.js

The demo is noticibly slow switching teams (at least for me), but not as slow as I was getting with my app (obviously had a few other things happening too).

I've disabled WhyDidYouRender on the component for now which solves my issue, but it's interesting that they don't seem to play nice.