试图导入错误：“路由”不是从“react路由器-dom”导出的。

Question

我正在尝试使用React路由器和路由，但是不断地得到这个错误：

​

我尝试了以下几点：

删除和重新安装react-router.

• deleting -

• -路由器-dom和node_modules文件夹，并运行npm安装

• 以确保react路由器和react

-dom是相同的版本

• 是的，我在上面列出的每一次尝试之后都重新启动了服务器。

以下是我的index.js代码：

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

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

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

package.json依赖关系：

  "dependencies": {
    "@craco/craco": "^6.1.2",
    "@testing-library/jest-dom": "^5.13.0",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "react": "^17.0.2",
    "react-axios": "^2.0.5",
    "react-dom": "^17.0.2",
    "react-player": "^2.9.0",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.3",
    "react-spinners": "^0.11.0",
    "video-react": "^0.14.1",
    "web-vitals": "^1.1.2"
  },

Answer 1

据我所知，React路由器没有Routes组件。我想说，您可以省略该组件，因为在它们的文档中没有使用这种comp。

来自docs的类似示例：https://reactrouter.com/core/api/Switch

Answer 2

您已经使用'npm -路由器-dom‘来安装路由器。这和路线不一样。

使用‘路由器-dom@next’安装随路由一起发布的版本。

Answer 3

1.对于您的package.json，您似乎还在使用react-router-dom v5

所以您需要使用Switch而不是Routes，路由只适用于react-router-dom v6

2.，因为您使用了react-router-dom v5，然后使用了jsx

   <Routes>
      <Switch>
        <Route path="/" element={<App />} />
        <Route path="*" element={<Whoops404 />} />
      </Switch>
    </Routes>

应代之以

 <Router>
   <Switch>
        <Route path="/"><App /></Route>
        <Route path="*"><Whoops404/></Route>
    </Switch>
 </Router>

3.从下面一行删除路由，我在您的导入中看到了它，因为您不会使用它，而且它甚至不从您正在使用的react-router-dom v5导出，它也是仅在v6上导出的

import { Switch, Route, Routes } from "react-router-dom";

4. 只是为了最佳实践，所以您的代码变成了干净的，您可以合并这两行代码，因为它们来自同一个包

import { BrowserRouter as Router } from "react-router-dom";
import { Switch, Route, Routes } from "react-router-dom";

所以他们最终看起来就像

import { BrowserRouter as Router, Switch, Route,  } from "react-router-dom";