How to clear browser back button history in react-router-dom-CodePudding

I am designing a Web Application using ReactJS. In here, I am using react-router-dom for navigation purposes.

Here,it looks like

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>

Since useHistory is replaced by useNavigation in recent version, I am using useNavigation for navigating pages.

Code:

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

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

It works great. But when I am naviagated to loginPage, I want to clear all the history stored in browser Back Button. I found Solutions in useHistory. But in useNavigation, its not working.

Code I tried:

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

and this also

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

Its not working. I want to know how to clear all the history stored in Browser Back Button for my url. If i go back, i can even access homePage. I read their docs https://reach.tech/router/api/useNavigate But can't find solutions. Please Help me with some solutions to fix this issue.

CodePudding user response：

try this

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

i think this will working

CodePudding user response：

You can do this using the .replace method from react-router.

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