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

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

我正在使用Framer Motion和React Router在不同路径之间创建动画。

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

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

我使用React Router v6进行路由，我的应用程序上有多个嵌套的路由和用于不同组件的并行开关，这是一个简单的目录。

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

我还向开关组件添加了location = {location} key = {location.pathname}并将exitBeforeEnter添加到AnimatePresence包装器中。

当访问目录的一项时，此问题变得很明显，该目录的路由为“ es /：catalogid /：id”，该项是动态的并且显示为上一页的覆盖图。进入这些路线会影响位于“ / es /”的上一条路线，并触发动画。

如何预防这一问题？

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

感谢阅读。

解决方法

共享代码可能有助于使实现更加清晰。

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

反应路由器的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

尝试为该Switch的密钥使用一个不同的值，该值不依赖于其子代发生的事情。

,

goodmorningasif 的回答是正确的。我遇到了同样的问题，因为我使用的是 key={location.key}。每次路由上的任何内容更改时，路由的键都会更改，包括路由参数和路由参数。

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

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

文档中并不清楚，但是您几乎可以在任何可以将位置用作字符串的地方使用 location object。使用对象可以让你只提供搜索字符串，不会改变当前路径。