Animating route transitions with CSSTransitionGroup and React-Router v6

Question

I'm starting to use React-Router v6, and running into issues animating route transitions.

Both the react-router docs and the react-transition-group docs specify ways that are not compatible with the new v6 api.

The primary reason seems to be the removal of the <Switch> component.

In react-router@v5, this worked:

import { Router, Route, Switch, useLocation } from 'react-router@v5'
import { TransitionGroup, CSSTransition } from 'react-transition-group'

function App() {
  const location = useLocation();

  return (
    <Router>
      <TransitionGroup>
        <CSSTransition key={location.key} classNames="fade" timeout={300}>
          <Switch location={location}>
            <Route path="/a" children={<A />} />
            <Route path="/b" children={<B />} />
          </Switch>
        </CSSTransition>
      </TransitionGroup>
    </Router>
  );
}

...However, in react-router@v6, this does not work:

function App() {
  const location = useLocation();

  return (
    <Router>
      <TransitionGroup>
        <CSSTransition key={location.key} classNames="fade" timeout={300}>
          <Routes location={location}>
            <Route path="/a" element={<A />} />
            <Route path="/b" element={<B />} />
          </Routes>
        </CSSTransition>
      </TransitionGroup>
    </Router>
  );
}

It seems that the main difference is how <Switch> accepted the Location prop, and would keep both routes rendered long enough for the transtion to conclude.

Without that, it seems like route entrance animations are abrupt. Interesting, exit animations from nested routes appears to work correctly.

Any ideas how to get transition animations working with react-router v6?

score 12 · Accepted Answer · answered Nov 12 '21 at 20:25

It seems you want both respective components on screen at the same time; that is, the new component would be animating in while the old is animating out.

This was impossible before v6.0.0-beta.3.

But it is now possible (after v6.0.0-beta.3) thanks to the re-addition of the location prop to the <Routes> component. (release notes for v6.0.0-beta.3)

Your sample code only needs 2 modifications to work for react-router@v6-beta.3, but needs the 3rd modification for the react-router@v6:

<Router> should instead web compatible router, like <BrowserRouter>.
The useLocation() hook must be used in the context of a router component. To fix that, you need a router wrapped in a parent component first, and then you're able to use the hook in any of router's child components.
Replace the children prop with the element prop, otherwise you'll get an error saying all component children of <Routes> must either be a <Route> or <React.Fragment>.

Also – helpful to know for animated routes - "<TransitionGroup> renders a <div> by default" which can sometimes mess with animations. So it's helpful to pass component={null} in props to stop it from doing that.

DEMO: All these changes are available here in this codesandbox:

Thanks for your demo, it's great! But any idea how to animate `Outlet` content only? Assuming I have a layout with a "fixed" part that is available on all pages. I forked [your example and enriched with nested routes with a layout](https://codesandbox.io/s/animated-routes-outlet-demo-react-router-v6-h85sj). — pawel-schmidt, Dec 27 '21 at 14:00
@pawel-schmidt did you ever get it working with `Outlet`? I'm also looking to do this — andy mccullough, Apr 21 '22 at 14:21

gdh · Answer 2 · 2020-07-01T03:14:58.500

3

There has been changes with react-router-v6. Read here and here

To get your animation working, replace Switch with Routes (no need to provide location). Provide element prop to Route. Also install history library.

I have made a working demo using v6. Both entering and leaving animations are working. Compare the code with yours.

edited Jul 01 '20 at 03:14

answered Jul 01 '20 at 03:00

gdh

13,114
2
16
28

6

There's still a problem with this. If you notice on your example, while transitioning, the Route going out will change to the new Route coming in. This was not the case in v5 as you could pass in a location prop that allowed both the Route going and and Route coming in to represent their correct route, not just the active. See [here](https://github.com/ReactTraining/react-router/issues/7297) for the active thread on this particular problem. – Peter Woolley Aug 07 '20 at 09:42

score 0 · Answer 3 · answered Jan 05 '22 at 14:45

0

In the meantime, this issue was fixed. The issue was mentioned here here.

See a working code example here: here.

answered Jan 05 '22 at 14:45

mleister

1,697
2
20
46

Please refer to [the _How do I write a good answer?_ article](https://stackoverflow.com/help/how-to-answer#:~:text=Provide%20context%20for%20links) when writing answers in the future. Specifically, the section about providing context for links is full of good ideas to improve your answer here. – Andria Apr 28 '23 at 15:39

Animating route transitions with CSSTransitionGroup and React-Router v6

3 Answers3