React Router Dom 6中Navigate to='/'路由不生效的正确写法咨询

基础实现代码 #

首先确保正确引入依赖：

import { Routes, Route, Navigate } from 'react-router-dom';
import Login from './pages/Login';
import Home from './pages/Home';

// 从状态管理、本地存储等位置获取登录态，注意要保证变量响应式
const getUserAuth = () => {
  const token = localStorage.getItem('access_token');
  return token ? JSON.parse(localStorage.getItem('user_info') || '{}') : null;
};

路由配置中直接在element字段内写三元判断即可：

function App() {
  const user = getUserAuth();
  return (
    <Routes>
      {/* 登录页路由：已登录跳转首页，未登录渲染登录组件 */}
      <Route
        path="/login"
        element={user ? <Navigate to="/" replace /> : <Login />}
      />
      {/* 首页路由：未登录跳转登录页，已登录渲染首页组件 */}
      <Route
        path="/"
        element={user ? <Home /> : <Navigate to="/login" replace />}
      />
      {/* 其余业务路由... */}
    </Routes>
  );
}

Navigate 跳转不生效的常见原因 #

• 遗漏replace属性：登录场景的跳转必须加replace，否则当前路由会被保留在浏览器历史栈，用户点击返回按钮时会再次触发跳转逻辑，表现为跳转无响应、循环跳回当前页。
• 组件放置位置错误：Navigate是声明式路由组件，必须放在<Routes>包裹的路由element属性中，或者放在路由对应渲染组件的合法JSX返回结构内，不能直接写在普通函数逻辑、事件回调外层等无法被React渲染的位置。
• 登录态无响应式：如果user是从React状态、Context、Redux中取的响应式值，要确保登录状态变更时能触发路由组件重渲染，否则初始渲染后判断逻辑不会重新执行。
• 路由匹配顺序问题：V6路由按照配置顺序从上到下匹配，如果在/login路由前配置了路径通配符*、或前缀匹配的父路由提前拦截了请求，会导致/login对应的判断逻辑根本不会执行。

批量路由鉴权可以抽离通用的鉴权包裹组件，不用在每个路由上重复写三元判断，维护成本更低。

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