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

【问题标题】：Modal behavior back/forward button using react-router 4使用 react-router 4 的模态行为后退/前进按钮
【发布时间】：2018-04-22 07:35:36
【问题描述】：

我有一个使用 React Router 4 的 React 应用程序。登录模式用于对用户进行身份验证。为了支持我给出的 UX 要求，我需要让后退按钮关闭模式。

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

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

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

我看不到使用反应路由器从历史记录中弹出位置的方法。但我想做的是听路由变化，如果 location.state 变回 showLogin 模式是假的，但位置是一样的，它会从历史记录中弹出前一个位置。

【问题讨论】：

【解决方案1】：

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

【讨论】：

据我所知，不可能阻止浏览器的后退按钮。所以我不明白这是如何解决我的问题的。也就是说，用户在浏览器中按下了后退按钮，代码中没有发生任何事情让我在此时对推送进行替换。