‘/node_modules/.vite/deps/react-router-dom.js?v=4f614f94‘ does not provide an export named ‘Switch‘

"dependencies": {
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-router-dom": "^6.3.0"
  },

今天第一天尝试开发react项目，依赖如图所示，启动后报错如下：

 

网上搜了好多资料和方法，怀疑是 react-router-dom淘汰了switch，最后找到一篇文章发现果然如此。react-router-dom从V5升级到V6后，Switch 重命名为 Routes，并且做了其他的相应改变。参考原文链接：

react 导入 react-router-dom引入Switch报 ‘Switch‘ is not exported from ‘react-router-dom‘_我们都是柠檬精诶的博客-CSDN博客react-router-dom从V5升级到V6后，有些使用做了一些改变：(1) Switch 重命名为 Routes// v5<Switch> <Route exact path="/"><Home /></Route> <Route path="/profile"><Profile /></Route></Switch>// v6<Routes> <R.https://blog.csdn.net/qq_43392573/article/details/121658373React-Router v6 新特性解读及迁移指南_前端劝退师的博客-CSDN博客_react router v6前言这里写自定义目录标题前言1. ``重命名为``2. ``的新特性变更3. 嵌套路由变得更简单3.1 简化嵌套路由定义3.2 新`API`:`Outlet`3.3 多个``4. 用`useNavigate`代替`useHistory`5. 新钩子`useRoutes`代替`react-router-config`。6. 大小减少：从`20kb`到`8kb`7. 迁移及其它重要修复...结语❤️...https://blog.csdn.net/weixin_40906515/article/details/104957712参考react-router-dom官网github地址：

react-router/tutorial.md at main · remix-run/react-router · GitHub

最终依据react-router-dom v6修改路由代码及效果如下：

App.jsx

import { Link } from "react-router-dom";

export default function App() {
  return (
    <div>
      <h1>Bookkeeper</h1>
      <nav
        style={{
          borderBottom: "solid 1px",
          paddingBottom: "1rem",
        }}
      >
        <Link to="/index">Index</Link> |{" "}
        <Link to="/about">About</Link>
      </nav>
    </div>
  );
}

main.jsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import {
  BrowserRouter,
  Routes,
  Route,
} from "react-router-dom";
import App from './App'
import './index.css'
import Index from "./container/Index";
import About from "./container/About";

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
   <BrowserRouter>
    <Routes>
      <Route path="/" element={<App />} />
      <Route path="index" element={<Index />} />
      <Route path="about" element={<About />} />
    </Routes>
  </BrowserRouter>   
  </React.StrictMode>
)

About.jsx

import React, { Component } from 'react'
 
export default class About extends Component {
    render() {
        return (
            <div>This is About page!</div>  
        )
    }
}

Index.jsx

import React, { Component } from 'react'
 
export default class Index extends Component {
    render() {
        return (
            <div>This is Index page!</div>
        )
    }
}