Motion: [BUG] Animate Presence not working correctly with react-router-dom

[MoSheikh]

Hi,

I'm trying to get a setup going with which I can switch between routes and use AnimatePresence to fade the navigation screens in and out. However, the exit animation does not play at all when the component under the Route is unmounted.

https://codesandbox.io/s/condescending-sid-610y6?file=/src/App.tsx

Switching between the routes, you can see that the route screens fade in correctly, but immediately switch to the new route. The Animate Presence component should fade out the previous route before the new route fades in.

AnimatedPresence should stay mounted throughout the example, and the unique keys assigned to each child component are completely static so I don't believe the issue stems from there.

Help would be greatly appreciated.

[EugeneBugor]

Try to set location={location} for Switch component.

[jlevy-io]

Having exact same issue. Setting location={location} on Switch made no difference

[MoSheikh]

Try to set location={location} for Switch component.

That fixed the issue for me! Thank you.