React Router V6页面未存入历史记录，浏览器返回按钮异常如何解决？

问题根源 #

你写的那段useEffect清理函数是核心问题：

useEffect(() => {
  return () => navigate('/mainPage');
}, [navigate]);

这段代码会在详情页组件卸载（比如点击返回键时）自动执行navigate('/mainPage')，相当于强制跳转，直接打乱了浏览器的历史栈——不仅详情页没被正常存入历史记录，连之前的主页记录也被干扰覆盖了。

解决步骤 #

1. 立刻删除这段useEffect代码，恢复浏览器默认的返回行为。
2. 确认主页跳转逻辑：React Router V6的navigate默认是push模式（会将当前页面加入历史栈），只要你没加{ replace: true }参数，主页跳转到详情页的代码就是正常的：

   // 主页中的跳转代码，会自动把主页存入历史栈
   navigate('detailPage/key');
   

3. 如需手动返回主页，不要硬编码路径，优先用navigate(-1)回到上一页；如果必须指定路径，确保用navigate('/mainPage', { replace: false })，保证是添加历史记录而非替换。

额外排查点 #

如果删掉问题代码后仍异常，检查路由配置是否有嵌套错误，或者其他页面是否使用了navigate的replace模式（比如navigate('/xxx', { replace: true })）——这种模式会替换当前历史记录，可能导致主页被挤出历史栈。

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