React编译报错：<Route>是否必须包裹在<Routes>组件中？

你使用的是react-router-dom v6及以上版本，该版本对路由API做了不兼容升级：

• 所有Route组件只能作为Routes组件的直接子元素使用，不能直接挂载在普通DOM标签下，这和你收到的报错提示完全对应
• v6版本的Route不再支持将路由对应组件作为子标签嵌套，必须通过element属性传入组件实例

import { Routes, Route } from "react-router-dom";
import AllMeetupsPage from "./pages/AllMeetups";
import NewMeetupsPage from "./pages/NewMeetups";
import FavoritesPage from "./pages/Favorites";

function App() {
  return (
    <div>
      <Routes>
        <Route path="/" element={<AllMeetupsPage />} />
        <Route path="/new-meetups" element={<NewMeetupsPage />} />
        <Route path="/favorites" element={<FavoritesPage />} />
      </Routes>
    </div>
  );
}

export default App;

• 新增了Routes组件的导入
• 用Routes标签包裹了所有Route组件
• 调整了Route组件的写法，将页面组件通过element属性传入

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