如何在 react-router-dom 中清除浏览器后退按钮历史记录

Question

我正在使用ReactJS设计一个 Web 应用程序。 在这里，我使用react-router-dom进行导航。

在这里，它看起来像

import { BrowserRouter, Route, Routes } from 'react-router-dom'
    <BrowserRouter>
        <Routes>
              <Route exact path='/login' element={<LoginPage />} />
              <Route exact path='/homePage' element={<HomePage />} />
              <Route exact path='/detailsPage' element={<DetailsPage />} />
        </Routes>
    </BrowserRouter>

由于在最近的版本中useHistory被useNavigation取代，我使用useNavigation来导航页面。

代码：

import { useNavigate } from "react-router";
const navigate = useNavigate();

 / **For Navigating ** /
navigate("/login")

它工作得很好。 但是当我导航到loginPage时，我想清除浏览器Back按钮中存储的所有历史记录。 我在useHistory中找到了解决方案。 但是在useNavigation中，它不起作用。

我试过的代码：

navigate[0] = navigate[navigate.length - 1]
navigate("/login")

这也是

navigate("/login", { replace: true })

它不工作。 我想知道如何为我的 url 清除Browser Back Button中存储的所有历史记录。 如果我 go 回来，我什至可以访问主页。 我阅读了他们的文档https://reach.tech/router/api/useNavigate但找不到解决方案。 请帮助我解决此问题的一些解决方案。

Answer 1

尝试这个

 navigate("/login", { replace: true })

我认为这会奏效

Answer 2

您可以使用 react-router 中的 .replace 方法执行此操作。

import { useHistory } from "react-router";
const history = useHistory();
history.replace(`your page url`);