React v6 公私路由实现故障求助：按最新方案配置仍失效

问题根源分析 #

你当前的实现不符合 React Router v6 的核心设计规范：

1. v6 彻底摒弃了 v5 中在组件内嵌套 <Route> 的写法，createBrowserRouter 是配置式路由，element 字段只需渲染 React 元素，无需返回路由组件
2. 私有路由的核心逻辑是权限校验后重定向或渲染子内容，而非返回 <Route> 节点
3. 原代码中 PrivateRoute 返回 null 会导致未授权时路由渲染空白，且子路由无法通过 Outlet 正确渲染

修复步骤 #

1. 重构 PrivateRoute 组件

将其改为 v6 标准的权限守卫模式，使用 Navigate 处理重定向，Outlet 渲染子路由：

import { Navigate, Outlet } from 'react-router-dom';
import PageLayout from './PageLayout'; // 引入你的布局组件

const PrivateRoute = ({ isAuth }) => {
  // 未授权直接重定向到登录页
  if (!isAuth) {
    return <Navigate to="/signin" replace />;
  }
  
  // 授权后渲染布局组件，子路由将通过布局内的 Outlet 展示
  return <PageLayout />;
};

export default PrivateRoute;

2. 调整路由配置结构

将私有路由作为父节点，直接挂载需要保护的子路由：

const router = createBrowserRouter([
  {
    path: "/signin",
    element: <Signin />,
  },
  {
    path: "/",
    // 用 PrivateRoute 作为权限守卫
    element: <PrivateRoute isAuth={true} />,
    errorElement: <ErrorPage />,
    children: [
      { index: true, element: <Dashboard /> },
      { path: "dashboard", element: <Dashboard /> },
      { path: "doctors", element: <DoctorsPage /> },
      { path: "adddoctor", element: <AddDoctorPage /> },
    ],
  },
]);

3. 确保 PageLayout 包含 Outlet

布局组件必须通过 <Outlet> 渲染子路由内容：

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

const PageLayout = () => {
  return (
    <div className="page-layout">
      {/* 你的布局内容：导航栏、侧边栏等 */}
      <nav>系统导航</nav>
      {/* 子路由页面将渲染在这里 */}
      <main>
        <Outlet />
      </main>
    </div>
  );
};

export default PageLayout;

后续角色权限扩展方案 #

若要添加角色控制，只需在 PrivateRoute 中扩展校验逻辑：

const PrivateRoute = ({ isAuth, userRole, allowedRoles }) => {
  if (!isAuth) return <Navigate to="/signin" replace />;
  if (!allowedRoles.includes(userRole)) {
    return <Navigate to="/unauthorized" replace />; // 无权限页面
  }
  return <PageLayout />;
};

// 路由配置中传入角色参数
{
  path: "/adddoctor",
  element: <PrivateRoute isAuth={true} userRole="admin" allowedRoles={["admin"]} />,
  children: [{ index: true, element: <AddDoctorPage /> }],
}

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