如何防止使用React-Router和Framer Motion重新渲染父路由？

Question

我正在使用带React Router的Framer Motion来创建不同路由之间的动画。

我遵循了这个教程：https://www.youtube.com/watch?v=qJt-FtzJ5fo

我将尝试将问题总结为以下几点：

我正在使用React路由器v6进行路由，我的应用程序上有多个嵌套路由和并行交换机，用于不同的组件，这是一个简单的目录。

我已经向每个页面的{content}组件添加了过渡，并将{footer}和{header}组件保留在不同的开关上，以防止它们产生动画效果。

我还将location={location} key={location.pathname}添加到switch组件，并将exitBeforeEnter添加到AnimatePresence包装器。

当访问目录的一个项目时，这个问题变得很明显，该项目的路由是"es/:catalogid/:id"，它是动态的，显示为覆盖在前一页上。访问这些路由会影响位于"/es/“的前一个路由，并触发动画。

如何预防这个问题呢？

Framer Motion and React router 5: How do I prevent re-render of parent components with nested routes?这几乎是完全相同的问题，但是codesandboxes不工作，解决方案也不能工作。

感谢您的阅读。

Answer 1

分享你的代码可能有助于增加一些实现的清晰度。

我的猜测是，在Switch组件上设置key={location.pathname}会导致重新呈现整个页面，然后触发动画。

React路由器的location.pathname绑定到当前url。例如，如果您从路径es/myItems转到es/myItems/myFirstItemDetail，这将反映在location.pathname中

如果目录的路由是嵌套的，当父组件的键发生变化时，React将重新呈现该父元素和所有子元素。

来自"4 methods to force a re-render in React"

By changing the value of the key prop, it will make React unmount the component and re-mount it again, and go through the render() lifecycle.

我也发现这个解释器很有帮助：Understanding React's Key Prop

尝试为该开关的键使用不同的值，该值不依赖于它的子项发生的事情。

Answer 2

“早上好”的答案是正确的。我遇到了同样的问题，因为我使用的是key={location.key}。每当路由上的任何内容发生变化时，路由的关键字都会发生变化，其中包括路由参数和路由参数。

既然您已经在使用location.pathname，我的建议是，不要使用路由参数，而只使用搜索字符串。这不会更改路由路径名，您将能够从组件内部读取它以确定要读取的内容。您甚至可以使用Route组件在搜索字符串匹配时仅呈现内部组件：

<Link to={{search: 'itemId=itemA'}} >Item A</Link>
<Route path={{ search: "itemId" }}>
// if itemId == itemA...
</Route>

这在文档中并不清楚，但您可以在几乎所有可以将位置用作字符串的地方使用location object。使用对象允许您仅提供搜索字符串，而不会更改当前路径。