React 路由器 v6，删除历史记录答案

【问题标题】：React router v6, Remove HistoryReact 路由器 v6，删除历史记录
【发布时间】：2022-07-25 12:08:56
【问题描述】：

有没有办法在 react-router v6 中删除历史记录，我正在创建一个网络应用程序，当用户到达主页并按下它时，它最终应该退出应用程序。但截至目前，如果历史存在，它就会倒退。如果 react-router 没有此功能，是否有其他方法可以解决此问题？

【问题讨论】：

你在 Electron 中运行它吗？如果没有，请不要乱用浏览器历史记录：如果用户更改页面或进行内容交换操作，那应该有一个历史状态，他们可以从/到/返回，如果他们点击“返回”登陆页面后，他们应该回到之前的位置，而不是“触发应用退出”。
@Mike'Pomax'Kamermans，这是真的，我不想弄乱历史并偶然发现其他问题，不，这不是电子，而是 PWA。截至目前，当用户返回主页时，我使用window.history.pushState(null, null, "/"); 强制没有返回。
我强烈建议删除该历史擦除：只要有人在浏览器中，他们的后退按钮应该在导航到他们现在的位置之前将他们带回到他们所在的位置。已经有一个退出按钮：你关闭标签。

标签： reactjs react-hooks react-router react-router-dom

【解决方案1】：

我没有完全理解你的问题。但是下面的代码可能有助于返回上一页。

import {useNavigate} from 'react-router-dom'

const Component = () => {
   const navigate = useNavigate()
   const goBack = () => {
      navigate(-1)
}

return (
   <>
      <button onClick={goBack}>Back</button>
   </>
)
}

【讨论】：

【解决方案2】：

我刚刚做了一个像你这样的 PWA 应用程序，我解决这个问题的方法是，无论何时向前或向后，我总是设置选项 {replace: true}。前任： navigate(/${SCREEN_1}, { replace: true }) navigate(-1, { replace: true })

所以当用户点击浏览器上的“下一步”/“返回”按钮时，只有浏览器的第一个空白页面（在我打开我的 URL 之前的位置）和当前页面。

我的应用只有 6 个屏幕。我不确定这种方式是否对你有用，但对我来说确实有用。希望对您有所帮助！

【讨论】：