从 'react-router-dom 中的历史记录中删除特定条目答案

【问题标题】：Delete a particular entry from history in 'react-router-dom从 'react-router-dom 中的历史记录中删除特定条目
【发布时间】：2021-01-04 05:49:50
【问题描述】：

考虑这种情况。用户从 Page1(/page1) 移动到 Page2(/page2) 到 page3(/page3) 。现在如果他按后退按钮，显然他将转到第 2 页（/第 2 页）。

但是在这里我如何从历史记录中删除 Page2(/page2) 条目，以便在从 Page3(/page3) 单击后退按钮时将他带到 Page1(/page1)

【问题讨论】：

您在什么时候知道您不想回到第 2 页？是在您转到第 3 页之前，还是之后？
一旦他到达第 3 页：按下后退按钮应该将他带到第 1 页而不是第 2 页 - 基本上跳过上一页。
是的，但是您只有在进入第 3 页后才知道这一点？或者你在第 2 页时知道吗？
是的，我们知道在第 2 页。它实际上是用于密码重置流程。第1页为“输入手机号码”，第2页为“输入OTP”，第3页为“设置新密码”。一旦用户进入 OTP 并到达第 3 页，在返回点击时，他应该被带回“输入手机号码页面”。就是这样。

标签： javascript reactjs react-router react-router-dom browser-history

【解决方案1】：

如果您知道不想返回第 2 页，则可以在离开第 3 页时替换历史记录中的第 2 页。如果有链接，您可以使用 <Link to={url} replace /> 执行此操作，也可以使用history.replace(url)。（你可以import history from 'history'，它是'react-router-dom'的子依赖。）

如果您只知道一旦到达第 3 页就不想返回，我不知道有什么干净的方法可以删除历史记录中的先前条目。

【讨论】：

感谢您的回答。这很完美。但是，一旦我从第 3 页（跳过第 2 页）到达第 1 页，在浏览器上单击下一个按钮，就会出现另一个问题，它会转到第 3 页。那应该不会太发生了，有什么办法可以清除现在之后的历史记录吗？
下一个按钮有什么作用？如果您想要可预测的行为，请不要使用带有 url 的链接而不是使用 history.next。
也许你应该提出一个新问题来详细解释如何重现。

【解决方案2】：

使用history.replace(page3)。它将在第 2 页的位置插入第 3 页。如果您返回，它将带您到第 1 页

【讨论】：

感谢您的回答。这很完美。但是，一旦我从第 3 页（跳过第 2 页）到达第 1 页，在浏览器上单击下一个按钮，就会出现另一个问题，它会转到第 3 页。那应该不会太发生了，有什么办法可以清除现在之后的历史记录吗？