Chrome返回按钮行为异常：登录后需直接返回首页的解决方案

• 登录成功后默认导航会把/login加入浏览器历史栈，导致历史顺序是「首页 → login → chat」，点击返回按钮会先回到login页面
• 当前login路由的逻辑是：只要存在token就自动重定向到chat，所以回到login页面瞬间就被跳回chat，根本没法回到首页

1. 替换登录后的历史记录 #

在Login组件里，登录成功的逻辑中，用replace模式导航到chat，这样会直接替换掉当前的login历史条目，让历史栈变成「首页 → chat」，点击返回就能直接回到首页。

代码示例（Login组件内部）：

// 登录请求成功后执行
navigate('/chat', { replace: true });

2. 调整路由的重定向逻辑 #

把login页面的重定向逻辑从路由层面移到组件内部，避免路由级别的强制跳转干扰返回行为：

修改路由代码 #

const { token } = useSelector((state) => state.auth);

return (
  <Routes>
    <Route path="/" element={<Layout />}>
      <Route index element={<Home />} />
      <Route path="about" element={<About />} />
      <Route path="contact" element={<Contact />} />
      <Route path="login" element={<Login />} /> {/* 移除路由内的token判断 */}
      <Route path="register" element={<Register />} />
    </Route>
    <Route path="/chat">
      <Route
        index
        element={token ? <ChatPage /> : <Navigate to="/login" />}
      />
    </Route>
  </Routes>
);

在Login组件内添加重定向逻辑 #

function Login() {
  const { token } = useSelector((state) => state.auth);
  const navigate = useNavigate();

  useEffect(() => {
    // 如果已经有token，直接跳转到chat
    if (token) {
      navigate('/chat', { replace: true });
    }
  }, [token, navigate]);

  // 登录表单及逻辑...
  return (
    // 你的登录界面代码
  );
}

这样调整后，既保留了已登录用户无法访问login页面的逻辑，又不会影响浏览器返回按钮的正常行为，点击返回就能直接回到首页。

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