javascript - 使用 CSSTransitionGroup 和 React-Router v6 动画路由过渡

Question

我开始使用 React-Router v6，并遇到了动画路由转换的问题。

react-router docs和 react-transition-group docs指定与新的 v6 api 不兼容的方式。

主要原因似乎是删除了<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 Prop ，并使两条路线的渲染时间足够长，以便过渡结束。

没有它，似乎路线入口动画很突然。有趣的是，嵌套路由的退出动画似乎可以正常工作。

任何想法如何使用 react-router v6 获得过渡动画？

Answer 1

似乎您希望同时在屏幕上显示两个相应的组件；也就是说，新组件将动画化而旧组件动画化。
这在 v6.0.0-beta.3 之前是不可能的。
但现在可以 (在 v6.0.0-beta.3 之后)感谢重新添加 location支持 <Routes>零件。 (release notes for v6.0.0-beta.3)
您的示例代码只需 2 处修改即可用于 react 路由器@v6-beta.3 ，但需要对 进行第三次修改 react 路由器@v6 :

<Router>应该改为 Web 兼容路由器，例如 <BrowserRouter> .

useLocation() hook 必须在路由器组件的上下文中使用。要解决这个问题，您首先需要一个包裹在父组件中的路由器，然后您可以在任何路由器的子组件中使用该钩子(Hook)。

替换 children支持 element Prop ，否则你会得到一个错误说all component children of <Routes> must either be a <Route> or <React.Fragment>.

也 - 有助于了解动画路线 - " <TransitionGroup> renders a <div> by default"有时会弄乱动画。所以通过 component={null}会有帮助在 Prop 中阻止它这样做。
演示 : 所有这些更改都可在此 codesandbox: 中找到