React Router v6报错：PeopleContainer非合法组件问题求助

这个报错的核心原因是React Router v6 对 <Routes> 组件的子元素有严格要求——只能是 <Route> 或 <React.Fragment>，而你沿用了v5的写法，直接把自定义组件（比如<PeopleContainer>）放在了<Routes>内部。

具体修复步骤 #

1. 修正App.js中的路由结构 #

v5里你可能是这么写的（直接把组件放进<Switch>）：

// React Router v5 写法（错误的v6写法）
import { Switch, Route } from 'react-router-dom';
import PeopleContainer from './PeopleContainer';

function App() {
  return (
    <div className="App">
      <Switch>
        <PeopleContainer />
      </Switch>
    </div>
  );
}

v6必须改成用<Route>包裹组件，通过element属性传递组件实例：

// React Router v6 正确写法
import { Routes, Route } from 'react-router-dom';
import PeopleContainer from './PeopleContainer';

function App() {
  return (
    <div className="App">
      <Routes>
        <Route path="/people" element={<PeopleContainer />} />
        {/* 其他路由也需要用同样方式包裹 */}
      </Routes>
    </div>
  );
}

2. 处理嵌套路由（如果PeopleContainer里有子路由） #

如果你的PeopleContainer内部包含嵌套路由（比如显示单个Person的页面），v6的写法也和v5完全不同：

先修改PeopleContainer.js

v5里可能依赖this.props.children或直接嵌套<Route>，v6需要用<Outlet>来渲染子路由内容：

// React Router v6 写法
import { Outlet } from 'react-router-dom';
import PeopleList from './PeopleList';

function PeopleContainer() {
  // 如果是类组件，改成函数组件或者在render里使用Outlet
  return (
    <div>
      <PeopleList />
      {/* Outlet会渲染匹配的子路由组件 */}
      <Outlet />
    </div>
  );
}

再修改App.js中的嵌套路由

v6的嵌套路由需要把子路由放在父路由的内部：

import { Routes, Route } from 'react-router-dom';
import PeopleContainer from './PeopleContainer';
import Person from './Person';

function App() {
  return (
    <div className="App">
      <Routes>
        <Route path="/people" element={<PeopleContainer />}>
          {/* 子路由用相对路径，不需要重复/people前缀 */}
          <Route path=":id" element={<Person />} />
        </Route>
      </Routes>
    </div>
  );
}

3. 注意其他v5到v6的关键变化 #

• 移除了component和render属性，统一用element传递组件
• <Switch>替换为<Routes>，<Routes>会自动匹配最佳路由，不需要exact属性
• 嵌套路由必须通过<Outlet>渲染子内容，不再依赖children

内容的提问来源于stack exchange，提问作者Theow Meng Ang