react-router-dom中Navigate如何配置浏览器返回按钮的历史记录？

核心思路 #

当前问题是因为Navigate默认采用添加新历史记录的push行为，导致浏览器历史栈为Home → page1 → login。点击返回时先回到page1，随即又被重定向回登录页。要实现返回直接到Home，关键是让page1的记录不留在历史栈中，改用替换当前历史记录的方式完成重定向。

具体实现 #

给Navigate组件添加replace={true}属性，重定向时会用登录页的记录替换掉page1的记录，此时历史栈变为Home → login，点击返回按钮就直接回到Home了：

// 修改后的Page1代码
<Navigate
    to={{
        pathname: "/login",
        state: {
            from: location.pathname,
        },
    }}
    replace={true} // 新增该属性
/>

补充说明 #

• replace属性的作用：默认Navigate会调用history.push()添加新历史条目，而replace={true}会调用history.replace()，用目标路径覆盖当前的历史记录，这样page1就不会留在浏览器的历史栈中。
• 登录成功后跳回page1的逻辑不受影响，之前存在state.from里的路径依然可以正常使用。

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