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

Question

我正在设计一个使用ReactJS. 在这里，我用于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 })

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

Answer 1

尝试这个

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

我认为这会起作用