2

在下面的示例沙箱中，我有一个父 React Router 渲染两个动画组件。

https://codesandbox.io/s/frame-motion-x-react-router-x-simple-tb1wg?file=/src/Routes.tsx

其中一个包含自己的嵌套链接——每个链接都有自己独立的成帧运动动画。当我单击路由链接时，我需要停止嵌套开关的父级重新渲染。我可以看到问题与在两个级别上使用 switch 键有关，但我不知道用什么替换它以停止重新渲染组件层次结构的更高层。如果我删除密钥，它会破坏动画。

脚步：

选择关于。注意正确的进入和退出动画。选择联系人。注意正确的进入和退出动画。选择 Child 1. 注意不需要的父组件重新渲染 select Child 2. 注意不需要的父组件重新渲染 注意：

  • 我添加了一些内联的 Math.random() 调用，这些调用在重新渲染时会发生变化
  • 我已经包含了一个没有动画的顶级链接，以演示嵌套组件在安装时按预期动画。但是，它仍在重新呈现子链接的选择。

location.pathname 键在选择深层嵌套链接时强制重新渲染。我可以用什么明智地替换它，以免它重新渲染？我试过删除它，但这会破坏动画。

谢谢

4

2 回答 2

2

一个更简单的解决方案是使用根路径名作为键。

/topics这样 AnimatePresence 就不会在开关从更改为时重新设置动画/topics/react。因为密钥仍然是相同的：topics.

<AnimatePresence>
  <Switch location={location} key={location.pathname.split('/')[1]}>
    <Route path="/" exact>
      <Home />
    </Route>
    <Route path="/topics">
      <Topics />
    </Route>
  </Switch>
</AnimatePresence>

您当然可以更进一步，并将其提取到一个函数中，该函数将为您提供适当的每个嵌套级别的密钥。

const getPathKey = (path, level = 1) => {
  // path: "/topics/react/router"
  // level: 1 -> topics
  // level: 2 -> topics/react
  // level: 3 -> topics/react/router
  return path.split('/').splice(1, level).join('/');
}

<AnimatePresence>
  <Switch location={location} key={getPathKey(location.pathname)}>
    ...
      
      <AnimatePresence>
        <Switch location={location} key={getPathKey(location.pathname, 2)}>
           ...
        </Switch>
      </AnimatePresence>

  </Switch>
</AnimatePresence>
于 2021-04-09T05:32:09.630 回答
1

已解决：我已将 location.pathname 替换为带有 useState 的路由器包装器上的组件特定状态键。

https://codesandbox.io/s/framer-motion-nested-routes-react-router-747yw

结果：子路由动画独立于父路由工作，反之亦然。可以通过防止单个链路上的多次重复重新路由来改进。欢迎提出建议。

于 2020-05-12T18:35:30.177 回答