react-router-dom v6中404问题及登出跳转异常排查求助

核心问题 #

1. 路由结构与顺序不合理：当前404路由位置错误，私有路由下重复生成首页重定向路由，导致登出后路由匹配逻辑混乱。
2. 权限校验与导航时机冲突：登出时先清空用户信息，组件重新渲染时，路由因权限过滤丢失匹配项先跳404，之后Private组件的未登录导航逻辑才触发跳转登录。
3. 登出流程缺少主动导航：Saga中仅清空用户信息，未主动触发登录页跳转，依赖组件被动监听状态变化，导致中间出现路由断层。

具体修复步骤 #

1. 重构路由结构 #

• 将兜底路由放在最后，确保所有合法路由匹配完成后才触发404。
• 移除重复的首页重定向路由，仅保留一个默认匹配项。

修正后路由代码：

<Routes>
  {/* 公共路由区 */}
  <Route path="" element={<Public />}>
    <Route path={ROUTES.login} element={<Login />} />
  </Route>

  {/* 私有路由区 */}
  <Route path={ROUTES.home} element={<Private />}>
    {/* 父路由默认跳转，仅需一次 */}
    <Route index element={<Navigate replace to="dashboard" />} />
    {/* 权限过滤后的页面路由 */}
    {pages
      .filter((page) =>
        page.hasAccess.some((role) =>
          _.isEqual(role, user?.info?.RoleCode)
        )
      )
      .map(({ id, path, element: Element }) => (
        <Route key={id} path={path} element={<Element />} />
      ))}
  </Route>

  {/* 特定404页面 */}
  <Route path={ROUTES.Error} element={<NotFound />} />
  {/* 兜底路由：匹配所有未定义路径 */}
  <Route path="*" element={<Navigate replace to={ROUTES.Error} />} />
</Routes>

2. 优化Private组件导航逻辑 #

确保未登录时直接跳转，避免路由匹配失败：

import { Outlet, useNavigate } from 'react-router-dom';
import { useSelector } from 'react-redux';

function Private() {
  const user = useSelector(state => state.user);
  const navigate = useNavigate();

  // 监听用户登录状态，未登录立即跳转
  useEffect(() => {
    if (!user?.info) {
      navigate(ROUTES.login, { replace: true });
    }
  }, [user, navigate]);

  // 未登录时不渲染子路由，避免无效匹配
  if (!user?.info) {
    return null;
  }

  return <Outlet />;
}

3. 调整登出Saga流程 #

在清空用户信息后主动触发登录页跳转，消除中间状态：

// 若使用connected-react-router
import { push } from 'connected-react-router';

function* logout() {
  socket.disconnect();
  // 清空用户状态
  yield put(userSlice.actions.logoutFulfilled(null));
  // 主动跳转登录页
  yield put(push(ROUTES.login));
  // 显示通知
  notification.success({
    message: 'Success',
    description: 'Logout Success',
  });
}

如果未使用connected-react-router，可在触发登出的组件中直接调用navigate(ROUTES.login)，或在Redux切片的extraReducers中结合useNavigate实现跳转。

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