React Router v6 and React Spring

[aaculp]

I having a hard time figuring out how to make these two things play nicely. With the removal of in React Router v6 it seems most of the examples I've seen are outdated. I'm trying to transition components (old component leaving new component coming in) but when I do this BOTH components update to the new component thats transitioning in.

Is anyone else having problems with React Router v6 and React Spring?

[joshuaellis]

Do you have a codesandbox you can share?

[aaculp]

I'll make one and drop it in here! Thanks for the reply

[nicholaschiang]

Curious about this too whenever you get around to it @aaculp ping me.

[zenoplex]

Here's the codesandbox.

[joshuaellis]

Thanks @zenoplex here's the revised codesandbox – https://codesandbox.io/s/react-router-animated-transitions-w-react-spring-not-working-forked-8py5jb?file=/src/index.js

I believe this is what you're all trying to achieve? Let me know if there's something i've missed.

[zenoplex]

Thx @joshuaellis 😄
Sorry, didn't noticed I've missed to pass the location as an item.

[jhclaura]

Thanks for the example @joshuaellis !
Is it possible to configure transition to be different based location?
I want to create native style transition, e.g. a 'back' navigation be different to a 'forward' navigation. Is it be possible to achieve that with react router & react spring?

[GMchris]

@joshuaellis 's answer works great, but it also forced to me to carry over my routes to the animating component, where previously I had them setup in a single file and was using react-router-doms <Outlet /> to render the correct page. Wondering if anyone's encountered this use case?

[ollwenjones]

same here. One "bug" I struggled with that I see in @joshuaellis ' example, that isn't there in the older examples on older versions of these libraries, is you can trigger the same route over and over and get many of the same 'view' sliding across the screen. Ok in the example, but if either route is a heavy UI for the device, that's not ideal.

The other challenge I've struggled with is the from/to needing to be dynamic, so if the next tab is to the right, they should both slide in from the right, but on the left, from the left. When I use hook that takes a function instead of a config object, it never seems to fire.

Locally the "leaving" routes are hanging out, too, hidden, but in the DOM. Not sue what that's about.

[xufromxu]

same here. I encountered this problem while using in transitions function. the exiting router was immediately replaced by entering router, so there are always two same router UI. Wonder is there a good way to tell diffrent router outlet?