React Router中自定义组件返回Route无法在Routes中渲染的问题

React Router v6 对 <Routes> 的子组件有严格的类型校验：它只会直接识别 <Route> 或 <React.Fragment> 作为子元素，不会解析自定义组件内部返回的 <Route>。

当你把自定义组件 <MyRoute> 直接放在 <Routes> 里时，React Router 会把它当作普通组件，而非路由规则的一部分，因此触发了类型错误提示。

方法1：将自定义逻辑移到Route的element属性中 #

把权限校验这类自定义逻辑封装成组件，作为 <Route> 的 element 属性值，而非让自定义组件返回 <Route>：

// 封装权限校验组件
const ProtectedRoute = ({ children }) => {
  // 这里编写权限判断逻辑，比如检查登录状态
  const isLoggedIn = true;
  return isLoggedIn ? children : <Navigate to="/Login" />;
};

// 在Routes中使用
<Routes>
  <Route path="/Login" element={<Login />} />
  <Route 
    path="/Dashboard" 
    element={
      <ProtectedRoute>
        <Dashboard />
      </ProtectedRoute>
    } 
  />
</Routes>

方法2：用useRoutes钩子管理路由数组 #

如果需要批量维护路由规则，可以使用 useRoutes 钩子，它支持在路由数组中直接嵌套带自定义逻辑的路由：

import { useRoutes } from 'react-router-dom';

const AppRoutes = () => {
  const routes = useRoutes([
    { path: '/Login', element: <Login /> },
    { 
      path: '/Dashboard', 
      element: <ProtectedRoute><Dashboard /></ProtectedRoute> 
    }
  ]);
  return routes;
};

// 在根组件中使用
<BrowserRouter>
  <AppRoutes />
</BrowserRouter>

方法3：用React.Fragment包裹自定义组件内的Route（不推荐） #

如果一定要保留自定义组件返回Route的写法，可以让组件返回包裹在 <React.Fragment> 中的Route，再直接放入 <Routes>：

const MyRoute = () => {
  return (
    <>
      <Route path='/Dashboard' element={<Dashboard />} />
    </>
  );
};

// 在Routes中使用
<Routes>
  <Route path='/Login' element={<Login />} />
  <MyRoute />
</Routes>

这种方式会让路由结构变得不直观，不利于后续维护，因此不推荐使用。

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