React.js中如何在路由内实现页面自动重定向？

你的问题核心是token状态更新时，Route的条件判断没有重新执行，导致只有页面刷新才会触发重定向。下面是两种可行的解决方法：

方法一：用useNavigate监听token变化 #

把路由的条件判断逻辑抽成独立组件，通过useEffect监听token的变化，一旦token存在就立即跳转：

import { Navigate, useNavigate } from 'react-router-dom';
import { useEffect } from 'react';
import Login from './Login';

const LoginRoute = ({ token }) => {
  const navigate = useNavigate();

  useEffect(() => {
    // token出现时立刻跳转
    if (token) {
      navigate('/dashboard', { replace: true });
    }
  }, [token, navigate]);

  return !token ? <Login /> : <Navigate replace to="/dashboard" />;
};

// 路由配置替换成：
<Route path='/login' element={<LoginRoute token={token} />} />

方法二：用Outlet实现公共路由守卫（推荐React Router v6+） #

React Router v6推荐用Outlet做路由嵌套，你可以封装一个未登录才能访问的公共路由组件，统一处理重定向逻辑：

import { Navigate, Outlet } from 'react-router-dom';

const PublicRoute = ({ token }) => {
  // 已登录直接跳转到dashboard
  if (token) {
    return <Navigate replace to="/dashboard" />;
  }
  // 未登录则渲染当前路由的内容
  return <Outlet />;
};

// 路由配置改成：
<Route element={<PublicRoute token={token} />}>
  <Route path='/login' element={<Login />} />
  {/* 可以在这里加其他未登录才能访问的路由，比如注册页 */}
</Route>

为什么原来的写法不生效？ #

你之前直接在Route的element属性里写条件判断，只有当Route所在的父组件重新渲染时，这个判断才会重新执行。如果token的更新没有触发父组件的重渲染（比如token来自未正确订阅的状态），就不会自动触发重定向。上面两种方法都是把判断逻辑放到组件内部，token变化时组件会自动重渲染，从而触发跳转。

另外要确保你的token是响应式状态——比如用useState管理，或者从Context/Redux等状态管理工具中通过hooks获取，这样token变化时才能触发组件更新。

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