如何在 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 中的所有历史记录。如果我回去，我什至可以访问主页。我读了他们的文档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`);