Framer Motion 和 React router 5：如何防止使用嵌套路由重新渲染父组件？

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

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

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

Steps:

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

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

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

thanks

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

这样 AnimatePresence 就不会在开关更改时重新设置开关动画/topics to /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>