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

【问题标题】：How to prevent re-render of parent route using React-Router and Framer Motion?如何防止使用 React-Router 和 Framer Motion 重新渲染父路由？
【发布时间】：2020-08-29 16:15:27
【问题描述】：

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

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

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

我正在使用 React Router 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? 这几乎是完全相同的问题，但代码和框不起作用，解决方案也不起作用。

感谢阅读。

【问题讨论】：

我已经发布了与您的类似问题的答案here

标签： javascript reactjs react-router framer-motion

【解决方案1】：

分享您的代码可能有助于增加实施的清晰度。

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

React Router 的 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 的键使用不依赖于其子级发生的事情的不同值。

【讨论】：

问题是防止重新渲染，而不是强制重新渲染。

【解决方案2】：

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。使用该对象允许您只提供搜索字符串，这不会改变当前路径。

【讨论】：