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

Question

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

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

Answer 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';