React Router DOM v6中封装路由至独立组件的实现问题

你遇到的错误是因为React Router的<Routes>组件仅接受<Route>或包裹在<React.Fragment>中的<Route>作为直接子元素，自定义组件（比如你的<SeparateRoutes/>）不能直接放在<Routes>内部，React Router无法解析组件嵌套的<Route>结构。

结合你“仅在需要时加载数据”的需求，推荐以下两种可行方案：

方案一：嵌套路由 + 上下文数据传递 #

这种方式能确保数据仅在访问目标路由时才加载，完全匹配你的需求：

1. 编写负责加载数据的父组件，通过Outlet传递数据：

function DataProviderRoute() {
  const [data, setData] = useState([]);
  
  useEffect(() => {
    // 这里写入你的数据加载逻辑
    setData([1,2,3]);
  }, []);

  // 通过Outlet的context将数据传递给子路由组件
  return <Outlet context={data} />;
}

2. 在App中用嵌套路由整合：

function App() {
  return (
    <Router>
      <Routes>
        {/* 父路由：只有访问子路由时，才会渲染DataProviderRoute并触发数据加载 */}
        <Route element={<DataProviderRoute />}>
          <Route index exact path="/path1" element={<SomeComponent data={useOutletContext()} />} />
          <Route path="/path2" element={<AnotherComponent data={useOutletContext()} />} />
        </Route>
        {/* 其他不需要data的路由可直接放在这里 */}
        <Route path="/other" element={<OtherComponent />} />
      </Routes>
    </Router>
  );
}

方案二：让自定义组件返回Route数组，直接在Routes中展开 #

如果不想用嵌套路由，可以修改SeparateRoutes使其返回Route元素数组，再在App的<Routes>中展开：

function SeparateRoutes() {
  const [data, setData] = useState([]);
  
  useEffect(() => {
    setData([1,2,3]);
  }, []);

  // 返回带唯一key的Route数组（避免React渲染警告）
  return [
    <Route key="path1" index exact path="/path1" element={<SomeComponent data={data} />} />,
    <Route key="path2" path="/path2" element={<AnotherComponent data={data} />} />
  ];
}

function App() {
  return (
    <Router>
      <Routes>
        {/* 展开Route数组 */}
        {SeparateRoutes()}
        {/* 其他路由 */}
        <Route path="/other" element={<OtherComponent />} />
      </Routes>
    </Router>
  );
}

注意：方案二中每次调用SeparateRoutes()都会创建新的组件实例，若App频繁渲染可能引发重复加载数据的问题，因此更推荐方案一。

另外你原代码存在一个语法错误：<Router/>应改为</Router>，记得修正闭合标签。

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