React Router V6 中的嵌套动画路由
she*_*nan 3 reactjs react-router react-router-dom framer-motion
我真的很难在 React Router 版本 6 中实现一些东西，这在版本 5 中相对简单。
我不仅希望在路由之间设置动画（由于最近对库的提交，现在终于可以在版本 6 中实现），还希望为嵌套路由设置动画。想想滑动页面中的滑动页面。
这是我迄今为止所拥有的 CodeSandbox。
我正在使用 Framer MotionAnimatePresence来检测退出动画。但是 React Router 希望重新设置父路由的动画，即使只是嵌套路由发生了变化。
正如您在CodeSandbox 演示中所看到的，路线动画正常，但是当单击“下一个嵌套页面”链接时，它还会重新动画整个页面，这不是我们想要的。我想要的是第 1 页保持静态，而其嵌套路线动画。显然，当您单击“下一页”时，整个页面应该有动画效果（从第 1 页移动到第 2 页）。但我似乎无法鱼与熊掌兼得。
有人能够做到这一点吗？图书馆和更广泛的网络上的抱怨表明这目前可能是不可能的？
小智 5
AnimatePresence在子导航时重新动画父路线的原因是因为keyprop。当发生key变化时，React 将其视为一个全新的组件。由于location.key当路线改变时 总是会改变，因此传递location.key给这两个Routes组件每次都会触发路线动画。
我能想到的唯一解决方案是手动管理两个组件的密钥Routes。如果更改 URL 结构以创建基本路由路径/page1，解决方案非常简单：
为了保持当前的 URL 结构，您需要为顶级Routes组合创建一个键，该键在从 导航/到时会发生变化，但在从 导航到或从到 时/page2不会更改。//nested1/nested1/nested2
| 归档时间： |
|
| 查看次数： |
2094 次 |
| 最近记录： |