1

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

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

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

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

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

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

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

一个人将如何防止这个问题？

Framer Motion 和 React 路由器 5：如何防止使用嵌套路由重新渲染父组件？这几乎是完全相同的问题，但是代码和框不起作用，解决方案也不是。

谢谢阅读。

4

2 回答 2

1

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

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

React Router 的location.pathname绑定到当前 url。例如，如果您从路线es/myItems前往es/myItems/myFirstItemDetail，这将反映在location.pathname

目录的路由是否嵌套无关紧要，当父组件的键更改时，React 将重新渲染该父元素和所有子元素。

从“在 React 中强制重新渲染的 4 种方法”：

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

于 2020-08-29T17:14:41.290 回答
1

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

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

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

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

于 2021-04-16T06:22:17.673 回答