ReactJS SPA project back / forward buttons on browser won't save the user path-CodePudding

I'm having a problem while trying to develop a SPA project with ReactJS, which back/forward buttons on browser won't work, like if the path of the user is not saving, something that's not happening with another project of a friend of mine ( he's developing a SPA too ). I will show some demos below and the way I'm redirecting the user.

Redirect method

import {useNavigate} from "react-router-dom";
const navigate = useNavigate()
    const redirect = (url)=>{
        navigate(url, {replace:true})
    }
<Navbar.Brand onClick={()=>{redirect('/')}}>eCommerce</Navbar.Brand>

Video : https://drive.google.com/file/d/1klkTUxOtgr0oJIOAMRCOnoPKu0Ac7x9e/view?usp=sharing

CodePudding user response：

Instead of useNavigate(), you can utilise useHistory() hook to achieve this. Replace your code something like below:

import {useHistory} from "react-router-dom";

const history = useHistory();
<Navbar.Brand onClick={()=>{history.push('/')}}>eCommerce</Navbar.Brand>

CodePudding user response：

This was solved using navigate(url) in place of navigate(url, {replace:true}).