Анимация маршрутов с помощью CSSTransitionGroup и React-Router v6

Question

Я начинаю использовать React-Router v6 и сталкиваюсь с проблемами, анимирующими переходы маршрутов.

Как документы реагирующий маршрутизатор , так и документы реагирующей группы перехода указывают пути, которые не совместимы с новым API v6.

Основная причина, по-видимому, заключается в удалении компонента <Switch>.

В react-router@v5 это сработало:

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>
  );
}

... Однако в react-router@v6 это не работает:

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>
  );
}

Похоже, что основное различие заключается в том, как <Switch> принял Location реквизит и поддерживал бы оба маршрута достаточно долго, чтобы завершить переход.

Без этого кажется, что анимация входа в маршрут является резкой. Интересно, что анимация выхода из вложенных маршрутов работает правильно.

Есть идеи, как получить анимацию перехода, работающую с response-router v6?