reactjs - 使用`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';