React Router v6封装路由为子组件报错的解决方法求助

错误原因 #

React Router v6 严格要求 <Route> 的直接子组件必须是 <Route> 或 <React.Fragment>，直接使用 <FriendsRoutes /> 作为 <Route> 的子节点时，该组件本身并非 <Route> 类型，因此触发报错。

方案一：修改自定义路由组件返回<Route>元素 #

调整 FriendsRoutes 组件，让它直接返回符合要求的 <Route> 结构：

// FriendsRoutes.js
import { Route } from 'react-router-dom';
import Friends from './Friends';
import AddFriends from './AddFriends';

const FriendsRoutes = () => {
  return (
    <Route path='friends' element={<Friends />}>
      <Route index element={<>{'asd'}</>} />
      <Route path='friend-request' element={<>{'12'}</>} />
      <Route path='blocked-friends' element={<>{'ccc'}</>} />
      <Route path='add-friends' element={<AddFriends />} />
    </Route>
  );
};

export default FriendsRoutes;

修改后在父路由中直接使用 <FriendsRoutes /> 即可，组件内部返回的是合规的 <Route> 元素，不会再触发报错。

方案二：使用路由配置对象 + useRoutes 钩子（推荐） #

这种方式更适合大型项目的路由拆分，结构更清晰易维护：

1. 单独定义好友模块的路由配置：

// friendsRoutes.js
import Friends from './Friends';
import AddFriends from './AddFriends';

export default {
  path: 'friends',
  element: <Friends />,
  children: [
    { index: true, element: <>{'asd'}</> },
    { path: 'friend-request', element: <>{'12'}</> },
    { path: 'blocked-friends', element: <>{'ccc'}</> },
    { path: 'add-friends', element: <AddFriends /> },
  ],
};

2. 定义主路由配置并导入子模块配置：

// routes.js
import Home from './Home';
import Feed from './Feed';
import friendsRoutes from './friendsRoutes';

export default [
  {
    path: '/',
    element: <Home />,
    children: [
      { index: true, element: <Feed /> },
      friendsRoutes,
      { path: 'saved', element: <>{'Saved'}</> },
    ],
  },
];

3. 在App组件中使用 useRoutes 渲染路由：

// App.js
import { useRoutes } from 'react-router-dom';
import routes from './routes';

function App() {
  return useRoutes(routes);
}

export default App;

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