问题描述
我的应用程序有两条路线：Step1 和 Step2 以及一个 Next 按钮，可将您从 Step1 带到 Step2。我想为 Step1 和 Step2 之间的过渡设置动画，以便当用户点击 Next 时，Step2 从右侧滑入视图，而 Step1 滑出左边的视图。
这在 React Router v5.2.0 (v5.2 demo) 中有效，但在 v6.0.0-beta0 (v6 demo) 中不。
- 在 v5.2 演示中，当您点击
Next时，您可以看到Step1按预期转出和Step2转入。 - 但是，在 v6 演示中，当您单击
Next时，Step1会立即替换为Step2并对其应用退出转换，因此Step2似乎同时进入和退出。
我认为这可能是由于 <Routes> 组件（它相当于 <Switch> 的 v6，请参阅迁移指南 here）。
根据 v5 docs（第 48 行），您必须将位置对象传递给 <Switch>，以便“它可以在动画输出时匹配旧位置”。 <Switch> 然后使用此对象而不是 context.location 来匹配路径 (see line 19)：
const location = this.props.location || context.location;
...而 <Routes> 只是从上下文 (see line 532) 中读取位置：
let location = useLocation() as Location;
我认为这解释了 v6 demo 中的行为 - 您可以看到退出路由在退出时从 <Step1> 重新呈现到 <Step2>，这是正确的吗？如何防止这种重新渲染？
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）