使用`history.goBack()`时如何定义状态

Question

我已经创建了一些动画，我想用它们在我的应用程序中的路由之间导航。我在某些页面上有一个后退按钮，允许用户弹出导航堆栈以访问最近的页面。我想要两种不同的动画，一种用于在堆栈中更深入地导航，另一种用于弹出回到最近的页面。我想使用history.goBack()，但似乎无法传递状态并因此使用不同的动画。

我使用这篇文章来弄清楚如何为我的组件设置动态动画，但除非我使用，否则我history.push({pathname, state:{animation, duration}})不知道如何在用户返回时指定要使用的不同动画。

Answer 1

一种解决方案可能是向应用程序的listen自定义对象添加方法。首先按照此处的history说明进行设置。

现在，history.goBack()使用POP历史堆栈中的操作，因此您可以像这样检查：

import { createBrowserHistory } from 'history';

const history = createBrowserHistory()

history.listen((location, action) => {
    if (action === 'POP') {
      history.replace(location.pathname, {specialAnimation: 'whatever value'});
    }
})

export default history

这种方式会重写你的状态，如果你的状态中有其他你想要的东西，你可以做类似的事情

location.state.specialAnimation = 'whatever';