React应用集成react-router-dom导航时出现<Route>必须包裹在<Routes>中的报错问题

嘿，这个问题我太熟悉了！你碰到的是React Router v6版本的核心规则变更——从v6开始，<Route>组件绝对不能直接渲染，必须把它包裹在<Routes>（注意是复数形式）组件里面，同时路由内容的写法也有调整。

错误原因拆解 #

React Router v6彻底重构了路由匹配逻辑，其中一个关键变化就是：所有<Route>必须作为<Routes>的直接子元素，而且原来通过嵌套组件定义路由内容的方式被废弃，改用element属性来传递要渲染的组件。另外，v6里也不再需要exact属性了，因为默认就是精确匹配规则。

修改后的完整代码 #

import { BrowserRouter, Routes, Route } from 'react-router-dom'
// 别忘了导入Header、Home、Footer组件哦
import Header from './Header';
import Home from './Home';
import Footer from './Footer';

function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <Header/>
        {/* 所有Route必须包裹在Routes里 */}
        <Routes>
          {/* 用element属性传递组件，不再需要exact */}
          <Route path="/" element={<Home/>} />
          {/* 如果有其他路由，也都放在这里面，比如：
          <Route path="/about" element={<About/>} />
          */}
        </Routes>
        <Footer/>
      </div>
    </BrowserRouter>
  );
}

export default App;

关键修改点总结 #

• 新增导入Routes组件：从react-router-dom里把Routes也导入进来
• 路由容器包裹：把所有<Route>放在<Routes>标签内部
• 路由内容写法变更：将原来嵌套在<Route>里的组件，改为通过element属性传入（比如element={<Home/>}）
• 移除exact：v6默认采用精确匹配，这个属性已经没用啦

这样修改后，你的路由导航就能正常工作了～

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