react-router-dom v6 PrivateRoute返回null仍渲染目标路由问题求助

问题根因 #

React Router v6 对 <Routes> 下的子组件有严格限制：仅官方 <Route> 组件会被识别为路由配置，你直接将自定义的 <PrivateRoute> 作为 <Routes> 的子组件时，React Router 会直接忽略该节点，既不会执行 <PrivateRoute> 内部的逻辑，也不会把你传入的path、element当作路由规则注册。你能访问到Dashboard、Settings组件属于开发环境缓存导致的异常表现，本质上你的私有路由逻辑从写法上就没有生效。

正确实现方式 #

方式1：单路由单独包裹 #

第一步：改造PrivateRoute组件

把它改成路由元素的包裹组件，不要尝试作为路由配置项使用：

import { Navigate } from "react-router-dom";

export const PrivateRoute = ({ children }) => {
  console.log('PrivateRoute 执行');
  const isLogin = false; // 替换为实际的登录态判断逻辑
  if (!isLogin) {
    // 未登录跳转到登录页，replace避免回退重复触发跳转
    return <Navigate to="/login" replace />;
  }
  // 已登录返回传入的业务组件
  return children;
};

第二步：修改App.js路由配置

所有路由都用官方<Route>组件声明，需要权限校验的路由把对应组件包裹在<PrivateRoute>里传给element属性：

const App = () => {
  return (
    <div>
      <Header />
      <Routes>
        <Route path='/' element={<Home/>} />
        <Route path='/pricing' element={<Pricing />} />
        {/* 私有路由配置 */}
        <Route path='/dashboard' element={<PrivateRoute><Dashboard /></PrivateRoute>} />
        <Route path='/settings' element={<PrivateRoute><Settings /></PrivateRoute>} />
        <Route path='/login' element={<Login />} />
      </Routes>
    </div>
  );
};

方式2：嵌套路由统一配置（私有路由数量多时推荐） #

如果私有路由数量较多，可以用嵌套路由统一做权限拦截，避免重复写PrivateRoute：

改造PrivateRoute组件

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

export const PrivateRoute = () => {
  const isLogin = false; // 替换为实际的登录态判断逻辑
  // Outlet对应嵌套的子路由组件
  return isLogin ? <Outlet /> : <Navigate to="/login" replace />;
};

修改App.js路由配置

const App = () => {
  return (
    <div>
      <Header />
      <Routes>
        <Route path='/' element={<Home/>} />
        <Route path='/pricing' element={<Pricing />} />
        <Route path='/login' element={<Login />} />
        {/* 所有子路由自动继承私有路由校验逻辑 */}
        <Route element={<PrivateRoute />}>
          <Route path='/dashboard' element={<Dashboard />} />
          <Route path='/settings' element={<Settings />} />
        </Route>
      </Routes>
    </div>
  );
};

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