使用react-router 4的模态行为后退/前进按钮

Question

我有一个使用React Router 4的React应用程序。登录模式用于验证用户。为了支持我已经获得的用户体验要求，我需要让后退按钮关闭模态。

我能够使用简单的推送状态完成支持此操作的登录模式：

const {history,location} = this.props
const nextState = {showLogin: true}
history.push({...location, state: {...location.state, ...nextState}})

行为按预期工作。但是......如果按下前进按钮没有重新打开模态，那将是理想的。

我没有看到使用react路由器从历史记录中弹出位置的方法。但我想要做的是收听路由更改，如果location.state更改回showLogin模式为falsey，但位置相同，则会弹出以前的位置关闭历史记录。

Answer 1

返回时使用history.replace('')代替history.push('')。这样，现有的登录路线将从历史堆栈中替换