React Router 5使用history.push传state跳转时浏览器后退异常问题

问题根因 #

• 全局popstate监听逻辑错误：两个页面组件都直接给window.onpopstate赋值，会互相覆盖监听逻辑，且useEffect未添加副作用清除函数，组件卸载后监听仍会触发，导致location.state判断混乱
• 回退逻辑触发循环：在popstate回调中调用history.push会新增历史栈记录，相当于每点一次回退，就往栈里加一条新的页面记录，自然会无限来回跳转
• 路由条件渲染写反：你将/signin、/signup路由包裹在auth===true的判断分支中，登录注册页本身应该是未登录状态也可访问的，当你在回退逻辑中执行setAuth(false)后，两个路由直接从路由表中消失，访问对应路径自然匹配到404
• 原生事件和React Router不同步：直接监听原生window.onpopstate无法和React Router维护的历史栈完全对齐，会出现路径变了但路由未匹配、或者逻辑执行时机错误的问题

修复方案 #

1. 移除所有自定义的window.onpopstate监听，改用React Router提供的导航拦截能力：
   如果是React Router v5版本，使用history.block拦截导航：

   // SignUp组件内示例
   useEffect(() => {
     const unblock = history.block((tx) => {
       // 只有导航到非/signin路径时才做拦截判断
       if (tx.pathname !== "/signin") {
         if (location.state?.from === "fromSignIn") {
           // 确认是从signin跳转来的，直接跳回signin，用replace不会新增历史栈
           history.replace({
             pathname: "/signin",
             state: { from: "fromSignUp" }
           });
           return false; // 阻止默认回退
         }
         setAuth(false);
       }
       return true;
     });
     return unblock; // 组件卸载时清除拦截
   }, [history, location.state, setAuth]);
   

   如果是React Router v6版本，使用官方提供的useBlocker钩子实现相同逻辑即可。

2. 修正路由条件渲染逻辑：
   把登录注册路由移到auth判断的外层，仅将需要登录才能访问的业务路由包裹在auth===true的分支中：

   <Switch>
     <Route path="/signup">
       <SignUp setAuth={setAuth} />
     </Route>
     <Route path="/signin">
       <SignIn setAuth={setAuth} />
     </Route>
     {auth ? (
       // 这里放登录后才能访问的路由，比如主页、个人中心等
     ) : (
       // 未登录时访问其他路径重定向到登录页
       <Redirect to="/signin" />
     )}
   </Switch>
   

3. 优化登录注册页互跳逻辑：
   两个页面之间的跳转使用history.replace代替history.push，避免在历史栈中新增多余记录，从根源上减少回退时的逻辑冲突：

   // 从signup跳转到signin的代码修改为
   history.replace({
     pathname: "/signin",
     state: { from: "fromSignUp" }
   });
   

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