React路由报错：[Register]不是<Route>组件，求解决方案

错误原因 #

React Router v6 要求<Route>组件必须通过element属性指定要渲染的内容，不能直接将组件或条件渲染逻辑作为<Route>的子元素。你当前的写法违反了这一API规范，导致抛出错误。

解决方法 #

将原本放在<Route>子节点的内容迁移到element属性中，同时注意v6不再需要exact属性（默认精确匹配）。修改后的代码如下：

function App() {
  const { user } = useContext(AuthContext);
  return (
    <Routes>
      <Route path="/" element={user ? <Home /> : <Register />} />
      <Route path="/login" element={user ? <Navigate to="/" /> : <Login />} />
      <Route path="/register" element={user ? <Navigate to="/" /> : <Register />} />
      <Route path="/profile/:username" element={<Profile />} />
    </Routes>
  );
}

export default App;

补充说明 #

• React Router v6 重构了路由体系，element是定义路由渲染内容的标准方式。
• 若需要实现路由保护（比如已登录用户无法访问登录/注册页），也可以封装一个专用的路由保护组件，复用逻辑会更清晰：

// 示例：路由保护组件
function ProtectedRoute({ children }) {
  const { user } = useContext(AuthContext);
  return user ? children : <Navigate to="/login" />;
}

// 使用方式
<Route path="/" element={<ProtectedRoute><Home /></ProtectedRoute>} />

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