react-router-dom v6添加嵌套受保护路由后无法访问的问题

问题根源 #

1. PrivateRoutes 组件写法错误：你给组件传了children参数，但返回的是<Outlet />，完全没用到传入的子路由，导致嵌套路由无法被 React Router 识别。
2. 路由配置结构不符合规范：将子路由直接放在 PrivateRoutes 组件标签内部，违背了 React Router v6 嵌套路由的定义方式。

修正方案 #

第一步：修复 PrivateRoutes 组件

去掉无用的children参数，专注做路由守卫的核心逻辑：

const PrivateRoutes = ({ isAuthenticated }) => {
  const navigate = useNavigate();

  useEffect(() => {
    if (!isAuthenticated) {
      navigate('/auth');
    }
  }, [isAuthenticated, navigate]);

  // 认证通过时渲染 Outlet，用于承载嵌套路由内容
  return isAuthenticated ? <Outlet /> : null;
};

第二步：调整路由配置结构

按照 React Router v6 规范，将受保护的子路由放在父路由的children中，父路由用 PrivateRoutes 作为element：

<AuthContext.Provider value={{isLogin : isLogin, login : login, logout : logout}}>
  <Router>
    <main>
      <MainNavigation />
      <Routes>
        <Route path="/" element={<Users />} />
        <Route path="/:userId/places" element={<UserPlaces />} />
        
        {/* 用 PrivateRoutes 作为父路由的守卫，子路由定义在 children 里 */}
        <Route element={<PrivateRoutes isAuthenticated={isLogin} />}>
          <Route path="/places/new" element={<NewPlace />} />
          <Route path="/places/:placeId" element={<UpdatePlace />} />
        </Route>
        
        <Route path="/auth" element={<Authenticate />} />
      </Routes>
    </main>
  </Router>
</AuthContext.Provider>

或者也可以用带父路径的写法，子路由用相对路径：

<Route path="/places" element={<PrivateRoutes isAuthenticated={isLogin} />}>
  <Route path="new" element={<NewPlace />} />
  <Route path=":placeId" element={<UpdatePlace />} />
</Route>

原理说明 #

React Router v6 中，嵌套路由依赖**父路由渲染<Outlet />**来显示子路由内容，子路由必须定义在父路由的children属性中。你的旧写法把子路由直接塞到 PrivateRoutes 组件内部，React Router 无法解析这些路由规则，自然会抛出路径不匹配的错误。

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