react-router-dom v6提示Route需包裹在Routes中报错排查

你的报错核心是3处v5/v6版本差异+代码写法错误，和有没有包裹Routes的逻辑无关，本质是你写的代码根本没用到正确的Routes组件：

• 导入语句错误：你写的import { BrowserRouter as Routes, Router, Route } from "react-router-dom"是把BrowserRouter重命名成了Routes，等于代码里写的<Routes>标签实际渲染的是BrowserRouter，真正的Routes组件根本没被导入，自然会触发"Route必须被Routes包裹"的报错
• Route写法不符合v6规范：v6版本的Route移除了component属性，统一用element属性传入JSX格式的组件，同时默认就是精确匹配，不需要加exact标识
• 外层嵌套错误：你单独引入的裸Router组件是底层路由基类，必须手动传入history实例才能正常工作，直接嵌套使用就会触发"Cannot read properties of undefined (reading 'pathname')"报错，常规开发直接用封装好的BrowserRouter作为最外层路由容器即可，不需要额外套Router。

替换App.js对应内容即可：

import "./App.css";
import Dashboard from "./components/Dashboard";
import Header from "./components/Layout/Header";
import "bootstrap/dist/css/bootstrap.min.css";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import AddProject from "./components/Project/AddProject";
import { Component } from "react";

class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <div className="App">
          <Header />
          <Routes>
            <Route path="/dashboard" element={<Dashboard />} />
            <Route path="/addProject" element={<AddProject />} />
          </Routes>
        </div>
      </BrowserRouter>
    );
  }
}

export default App;

• v5中包裹Route的<Switch>组件在v6中完全废弃，替换为<Routes>
• v6所有路由默认精确匹配，移除了exact、strict等匹配规则相关属性
• 路由对应渲染的内容不再支持component、render传参，统一用element属性传入JSX节点
• 不要随意给核心路由组件设置别名，很容易出现组件引用错误的低级问题
• 最外层仅需保留一个路由上下文容器（绝大多数场景用BrowserRouter即可），不要额外嵌套未初始化的裸Router组件

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