如何正确配置react-transition-group来独立制作嵌套动画？

Question

我已经在正式的React Router转换示例中添加了一个嵌套路由。

https://codesandbox.io/s/react-router-animated-transitions-lihls?file=/example.js

我在外部开关上使用了默认的淡入淡出示例，在嵌套开关上使用了“缩放”过渡，但这两个开关都是淡入淡出的。也就是说，外部动画覆盖了没有效果的嵌套动画。如果我把它放在父路由上，缩放效果css就能正常工作。

function AnimationApp() {
  return (
  ...
  <CSSTransition key={location.key} classNames="fade" timeout={500}>
    <Switch location={location}>
  ...
  );
}

function Nested() {
  return (
  ...
  <CSSTransition key={location.key} classNames="zoom" timeout={500}>
    <Switch location={location}>
    ...
  );
}

我还尝试将嵌套的csstransition包装在转换组中，但错误是相同的。

  <TransitionGroup>
    <CSSTransition key={location.key} classNames="zoom" timeout={500}>
      <Switch location={location}>
      ...

是我做错了什么，还是react-transition-group不支持嵌套路由？

谢谢

Answer 1

我已经创建了一个解决方案，向组件状态添加一个独立于路由器位置对象的键，并在单击链接时更新它。这不是最好的解决方案(将onclick添加到所有链接)，而且有一些重复。如果在React中有一种方法可以说"add an onClick to all NavLinks“，那会更好。

更改的快速摘要...

  let [key, setKey] = useState();
  useEffect(() => {
    setKey(Math.random());
  }, []);
  ...
  <NavLink onClick={() => setKey(Math.random)} to={`${url}/child1`}>
     Child1
  </NavLink>
  ...
  <TransitionGroup>
    <CSSTransition>
      <Route path={`${url}/child1`} children={<Child1 />} />
  ...

它适用于组件树中的任何级别，以允许独立的CSSTransitions。原则是合理的，并且比使用location.pathname作为多级组件的键更有意义，但它需要一些整理。

https://codesandbox.io/s/react-router-animated-transitions-using-state-and-effects-x3v3k?file=/example.js