React路由报错：<Route>仅能作为<Routes>子元素使用，求解决方案

第一个错误原因 #

你遇到的<Route>仅能作为<Routes>元素的子元素使用，不能直接渲染错误，是因为React Router v6 不再允许在<Route>的element属性中嵌套返回另一个<Route>组件。你最初的ProtectedLogin和ProtectedRoute组件内部返回了<Route>，这违反了v6的路由规则。

第二个问题：逻辑反转导致页面无响应 #

你修改后的保护组件逻辑写反了，导致路由跳转逻辑失效：

• ProtectedLogin的逻辑应该是：已认证（auth为true）时跳转到首页，未认证时显示登录组件，但你写的是auth ? <Component /> : <Navigate to="/" />，刚好搞反了。
• 这就导致已登录时反而显示登录页，未登录时跳首页，点击自然无响应。

修正后的完整代码 #

1. 修正ProtectedLogin组件 #

const ProtectedLogin = ({ auth, component: Component }) => {
  // 已登录则跳转首页，未登录显示登录组件
  return auth ? <Navigate to="/" replace /> : <Component />;
};

2. 修正ProtectedRoute组件（逻辑正确，可保留但建议加replace优化跳转） #

const ProtectedRoute = ({ auth, component: Component }) => {
  // 已登录显示目标组件，未登录跳转登录页
  return auth ? <Component /> : <Navigate to="/login" replace />;
};

加replace属性是为了避免用户点击浏览器回退按钮时回到登录页，优化体验。

3. AllRoutes组件保持不变 #

const AllRoutes = () => {
  const Auth = React.useContext(AuthApi);
  return (
    <Routes>
      <Route path="/register" element={<Register />}/>
      
      <Route path="/login" element={<ProtectedLogin auth={Auth.auth} component={Login} />}/>
      <Route path="/" element={<ProtectedRoute auth={Auth.auth} component={Home} />}/>
    </Routes>
  );
};

额外注意事项 #

• 确保AuthApi上下文里的auth状态是正确的布尔值：登录成功后要将auth设为true，登出时设为false。
• 如果你的组件需要接收额外props，可以在保护组件中传递：

  const ProtectedRoute = ({ auth, component: Component, ...props }) => {
    return auth ? <Component {...props} /> : <Navigate to="/login" replace />;
  };
  

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