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

Question

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

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

Answer 1

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

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

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

How to define state when using `history.goBack()`

reactjs

react-router

react-transition-group