ReactJS SPA项目浏览器前进后退按钮无法保存用户路径求助

问题出在你使用navigate时传入的{replace:true}参数上。这个参数的作用是替换当前的浏览器历史记录条目，而不是在历史栈中新增一条记录。每次跳转都用replace的话，浏览器的历史栈里始终只有一条记录，自然无法使用前进、后退按钮，也不会保存用户的访问路径。

修改方案 #

去掉replace:true配置（默认就是push模式，会新增历史记录）：

import {useNavigate} from "react-router-dom";
const navigate = useNavigate()
const redirect = (url)=>{
    // 移除replace配置，默认采用push模式
    navigate(url)
}
<Navbar.Brand onClick={()=>{redirect('/')}}>eCommerce</Navbar.Brand>

如果某些场景确实需要使用replace（比如登录成功后跳转到首页，不想让用户后退回登录页），只在特定跳转逻辑中添加该参数即可，不要全局用replace处理所有跳转。

内容的提问来源于stack exchange，提问作者user19088941