使用`history.goBack（）`时如何定义状态

Question

我创建了一些动画，这些动画可用于在应用程序中的路线之间导航。我在某些页面上可见一个后退按钮，该按钮使用户可以弹出导航堆栈以访问最新页面。我想要两种不同的动画，一种用于在堆栈中更深地浏览，另一种用于弹出回到最新页面。 我想使用purrr::partial，但似乎无法通过状态来使用其他动画。

我使用此article来了解如何为我的组件制作动态动画，但是除非我使用purrr::compose，否则我看不到如何指定用户移动时要使用的其他动画回来。

Answer 1

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

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

// in your history.js

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

通过这种方式重写您的状态，如果您希望在状态中添加其他内容，则可以执行类似的操作

location.state.specialAnimation = 'whatever';