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

【问题标题】：How to define state when using `history.goBack()`使用`history.goBack()`时如何定义状态
【发布时间】：2019-03-01 15:28:52
【问题描述】：

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

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

【问题讨论】：

标签： reactjs react-router react-transition-group

【解决方案1】：

一种解决方案是将listen 方法添加到您的应用的自定义history 对象。首先按照说明here 进行设置。

现在，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';

【讨论】：

谢谢，这个解决方案效果很好（在对我上面已经编辑过的语法进行了小幅修复之后）。
请记住，如果用户直接访问 URL，则操作也是 'POP' - 因此，如果您尝试解决“按下后退”的问题，则此方法不起作用。