如何在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时，我想清除浏览器后退按钮中存储的所有历史记录。我在useHistory中找到解决方案。但是在useNavigation中，它没有起作用。

我尝试过的代码：

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

还有这个

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

这不起作用。我想知道如何清除浏览器后退按钮中存储的所有历史记录，以针对我的网址进行操作。如果我返回，我甚至可以访问主页。我阅读了他们的文档https://reach.tech/router/api/useNavigate，但找不到解决方案。请帮我提供一些解决此问题的方法。

- rafekas

---

你是否找到了解决办法？ - Elcid_91

Answer 1

试一下这个

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

我认为这将会起作用

- Ali Ehyaie

---

我尝试过了，但它不起作用。 - rafekas

Answer 2

你可以使用 react-router 的 .replace 方法来实现这个功能。

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

- sedhal

---

useHistory()在react-router中已不再可用。他们改用useNavigate()。 - rafekas