The Holy Grail of React Router transitions on the web
For the last year I’ve been perfecting route transitioning with react-router-dom and react-pose. This week I was able to crack the code.
If you’re experienced with react-pose you might be familiar with animating the react-router-dom Switch component. If you are, you might have seen a lot of issues such as animations sticking around for the next render, or “jumps” while changing from the bottom of the page to the top of another page.
This is what I’ve now solved, and want to share. If you want to get going right away, see this codesandbox for the final solution:
For this to work, you’ll need these dependencies
npm install react-router-dom react-pose --saveAnimatedSwitch.js
This is our magic component, replacing the react-router-dom <Switch/> component. It handles everything route animation related such as animation direction, transition speed and animation types.
Routes.js
The puppet master of our routes, holding a list of all routes with the components in it. Render <Route /> components as children of <AnimatedSwitch />
Things to remember
It’s very important to include wrapper styling for all pages. We want to make all our routes position: fixed, so that when they appear on the page, no other DOM elements will disturb the animation. If you’re scroll down, it’ll start at the top of the next page. Make this class 100vw/vh for width/height. Also, make sure that child components can be scrolled down through this component.
And this should be it. It’s a simple wrapper composition which you’ll keep separate from the whole application. Have another look at the codesandbox and the code. If you have questions, please go ahead and ask! I also want to hear your solutions to this. 🐱👤
