React Protected Route问题：刷新子路由时重定向至父组件

1. 子路由无渲染出口：当前路由结构中，父路由/的element直接渲染<Dashboard />，但Dashboard组件未包含<Outlet />。React Router中，子路由的内容必须通过父路由组件内的<Outlet />才能渲染，因此访问/settings时，子路由的Settings组件无法展示，页面仅显示父路由的Dashboard，看起来像是被重定向回首页。
2. 路由保护范围不合理：将ProtectedRoute直接包裹Dashboard，仅保护了父路由的Dashboard组件，子路由的权限逻辑完全依赖父路由的渲染逻辑，容易导致路由匹配时的渲染异常。

方案1：调整路由结构，添加子路由出口 #

修改路由配置，让父路由的element为ProtectedRoute包裹的<Outlet />，并将Dashboard作为根路径的子路由：

function App() {
    const router = createBrowserRouter([
        {
            path: "/",
            element: <ProtectedRoute><Outlet /></ProtectedRoute>,
            children: [
                {
                    path: "", // 根路径匹配Dashboard
                    element: <Dashboard />
                },
                {
                    path: "settings",
                    element: <Settings />
                },
            ],
        },
        {
            path: "/login",
            element: <Login />,
        },
    ]);

    return (
        <RouterProvider router={router} />
    )
}

如果Dashboard需要作为共享布局（比如包含侧边栏、顶部导航），可以在Dashboard组件内部添加<Outlet />，让子路由内容渲染在布局的指定区域。

方案2：优化ProtectedRoute处理加载状态 #

如果useSession()存在加载阶段（比如从后端获取用户信息时，user初始为undefined），需要在ProtectedRoute中处理加载状态，避免误判：

export function ProtectedRoute({ children }) {
    const { user, loading } = useSession(); // 假设useSession返回loading状态
    if (loading) {
        return <div>加载中...</div>; // 可替换为自定义加载组件
    }
    if (!user){
        return <Navigate to="/login" replace/>
    } else {
        return children;
    }
}

额外注意 #

• 确保使用的react-router-dom版本为v6.4及以上（createBrowserRouter是该版本新增的API）。
• 子路由路径"settings"无需添加前置斜杠，React Router会自动拼接父路由路径生成完整的/settings路径。

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