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

我使用帧运动和React Router在不同路径之间创建动画

我遵循了本教程：

我将试着从以下几点来总结这个问题：

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

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

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

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

如何防止这一问题

这几乎是同一个问题，但代码沙盒不起作用，解决方案也不起作用

---

感谢阅读。

共享您的代码可能有助于提高实现的清晰度

我猜想，在开关组件上设置

key={location.pathname}

会导致重新呈现整个页面，然后触发动画

React路由器与当前url绑定。例如，如果您从路径

es/myItems

转到

es/myItems/myfirstitemdail

，这将反映在

location.pathname

不管目录的管线是否嵌套，当父组件的键发生更改时，React将重新渲染该父元素和所有子元素

发件人：

我还发现这个解释者很有帮助：

---

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

共享代码可能有助于在实现上增加一些清晰度

我猜想，在开关组件上设置

key={location.pathname}

会导致重新呈现整个页面，然后触发动画

React路由器与当前url绑定。例如，如果您从路径

es/myItems

转到

es/myItems/myfirstitemdail

，这将反映在

location.pathname

不管目录的管线是否嵌套，当父组件的键发生更改时，React将重新渲染该父元素和所有子元素

发件人：

我还发现这个解释者很有帮助：

---

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

goodmorningasif的答案是正确的。我遇到了同样的问题，因为我使用的是

key={location.key}

。每次路由上的任何内容更改时，路由的键都会更改，其中包括路由参数和路由参数

由于您已经在使用

location.pathname

，我的建议是，不要使用路由参数，而只使用搜索字符串。这不会更改路由路径名，您可以从组件内部读取该路径名以确定要读取的内容。当搜索字符串匹配时，甚至可以使用

Route

组件仅渲染内部组件：

项目A
//如果itemId==itemA。。。

---

文档中不清楚，但您几乎可以在任何地方使用位置作为字符串。使用该对象可以只提供搜索字符串，而不会更改当前路径。

goodmorningasif的答案是正确的。我遇到了同样的问题，因为我使用的是

key={location.key}

。每次路由上的任何内容更改时，路由的键都会更改，其中包括路由参数和路由参数

由于您已经在使用

location.pathname

，我的建议是，不要使用路由参数，而只使用搜索字符串。这不会更改路由路径名，您可以从组件内部读取该路径名以确定要读取的内容。当搜索字符串匹配时，甚至可以使用

Route

组件仅渲染内部组件：

项目A
//如果itemId==itemA。。。

---

文档中不清楚，但您几乎可以在任何地方使用位置作为字符串。使用对象允许您仅提供搜索字符串，这不会更改当前路径。

问题是防止重新渲染，而不是强制重新渲染。问题是防止重新渲染，而不是强制重新渲染。我已将解决类似问题的答案发布到您的答案我已将解决类似问题的答案发布到您的答案

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.