react-router-dom导入报错：'Routes'未导出，常规排查无效求解决方案

问题根因 #

你当前安装的react-router-dom版本为v5.2.0，Routes 是React Router v6版本才新增的API，v5版本没有该导出，因此触发导入错误，同时你的代码还混用了仅v6支持的element属性和v5的Switch组件，也会存在兼容问题。

解决方案 #

方案1：升级到React Router v6（推荐）

• 先卸载旧版本：npm uninstall react-router react-router-dom
• 安装v6版本：npm install react-router@^6 react-router-dom@^6
• 调整代码（v6已经废弃Switch，直接用Routes替代即可，不需要嵌套）：

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Whoops404 from "./components/Whoops404";

function Pages() {
  return (
    <Routes>
      <Route path="/" element={<App />} />
      <Route path="*" element={<Whoops404 />} />
    </Routes>
  );
}

ReactDOM.render(
  <React.StrictMode>
    <Router>
      <Pages />
    </Router>
  </React.StrictMode>,
  document.getElementById("root")
);

方案2：继续使用v5版本，适配v5语法

如果暂时不想升级版本，直接修改代码适配v5规范即可：

• 删除Routes的导入和外层<Routes>标签，v5用Switch做路由匹配
• v5的Route组件不支持element属性，改用component属性传组件
  修改后代码如下：

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import Whoops404 from "./components/Whoops404";

function Pages() {
  return (
    <Switch>
      <Route path="/" component={App} />
      <Route path="*" component={Whoops404} />
    </Switch>
  );
}

ReactDOM.render(
  <React.StrictMode>
    <Router>
      <Pages />
    </Router>
  </React.StrictMode>,
  document.getElementById("root")
);

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