如何修复错误：尝试导入错误：“Route”未从“react-router-dom”导出

Question

- 更新：当我刚刚停止开发服务器，退出 VSCode 并再次重新启动它时，这开始工作了。 不知道是什么原因造成的。

忙于学习 React，遇到了这个错误。 我已经尝试了其他几个 SO 帖子，但似乎无法回答我的问题。

我遵循仅使用 react-router-dom 并从 react-router-dom 导入 BrowserRouter 和 Route 的指导。 但我收到一个错误：

./src/App.js
Attempted import error: 'Route' is not exported from 'react-router-dom'.

不知道我在这里做错了什么？

这是我的 App.js

import React, { Component } from 'react';
import Navbar from './components/Navbar'
import { BrowserRouter, Route } from 'react-router-dom'
import Home from './components/Home'

class App extends Component {
  render() {
    return (
      <BrowserRouter>
      <div className="App">
        <Navbar />
        <Route path='/' component={Home} />
      </div>
      </BrowserRouter>
    );
  }
}

export default App;

这是我的 package.json：

  "name": "poketimes",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.8.5",
    "react-dom": "^16.8.5",
    "react-router-dom": "^5.0.0",
    "react-scripts": "2.1.8"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

从我一直在阅读的内容来看，其他帖子仍然单独使用 react-router，但是如果我正确理解文档，我不应该在这个版本中这样做吗？ 另外，我正在关注一个完全做到这一点的教程，它似乎有效。

任何建议将不胜感激，谢谢！

Answer 1

关闭服务器并重新启动它。 它工作正常。

npm start或yarn start

Answer 2

我遇到了同样的问题。 你可能和 NPM 和 YARN 有冲突。 我删除了我的 yarn.lock 并只用 package.lock 再次运行它； 它奏效了。

你应该只使用 Yarn 或 NPM。

Answer 3

我也被困在这个问题上......对我来说，当“react-router”和“react-router-dom”的版本匹配时，它就起作用了。

 "react-router": "^5.2.0", "react-router-dom": "^5.2.0",

Answer 4

由于 react-router-dom 的版本而发生此问题。 尝试将 react-router-dom 更新到版本 6。

只需运行命令：

npm install react-router-dom@6.0.0-beta.0

Answer 5

import React, { Component } from 'react';
import Navbar from './components/Navbar'
import { BrowserRouter, Route ,Switch} from 'react-router-dom'
import Home from './components/Home'

class App extends Component {
render() {
  return (
    <BrowserRouter>
     <div className="App">
     <Navbar />
      <Switch>
      <Route exact path='/' component={Home} />
    </Switch>

    </div>
    </BrowserRouter>
   );
  }
  }

  export default App;

试试这个方法

Answer 6

您应该将此行添加到您的组件中。

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

我的问题通过这种方法解决了。

Answer 7

我的问题解决了

npm uninstall react-router

和

npm uninstall react-router-dom

然后

npm install react-router react-router-dom

使用版本 5.0.0

Answer 8

发生错误是因为您使用的是 react-router v5 而不是 v6-

按着这些次序-

步骤1：

npm uninstall react-router

---

npm uninstall react-router-dom

第2步：

npm install react-router@next react-router-dom@next

第 3 步：重新启动服务器

你们都准备好了！

Answer 9

对于 react-router-dom v6 及更高版本，请在您的 App.js 中使用它

import React from 'react'
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'

import '../styles/global.css'

import Layout from '../containers/Layout'
import Home from '../pages/Home'
import Login from '../containers/Login'
import RecoveryPassword from '../containers/RecoveryPassword'
import NotFound from '../pages/NotFound'

const App = () => {
  return (
    <Router>
      <Layout>
        <Routes>
          <Route exact path="/" element={<Home/>}/>
          <Route exact path="/login" element={<Login/>}/>
          <Route exact path="/recovery-password" element={<RecoveryPassword/>}/>
          <Route path="*" element={<NotFound/>}/>
        </Routes>
      </Layout>
    </Router>
  );
}

export default App;

从 v5 到 v6 所做的更改

Switch到Routes

<Route path = '/' component = {Home}></Route>

变成

<Route path = '/' element= {<Home />}></Route>

Answer 10

可能是因为您尚未安装它而发生这种情况。 你应该运行这个命令：

npm i react-router

Answer 11

请重新检查 BrowserRouter 的拼写，否则如果拼写正确，请使用 CTRL + C 重新启动 npm 和

npm start 

Answer 12

像这样安装react-router和react-router-dom ：

npm install react-router@next react-router-dom@next

Answer 13

在即将到来的版本中，您的路线似乎已贬值，因此请使用此导入：

import {Route} from 'react-router-dom/Route';

Answer 14

您需要确定 App 类中的返回类型是什么。 您正在返回 BrowserRouter。 因此，当您进行导入时，您需要确保输入要导入的正确类名。

返回的是 BrowserRouter，而不是 Router。

所以应该是

import { BrowserRouter } from 'react-router-dom'

或者

import { BrowserRouter as Router } from 'react-router-dom'

Answer 15

我认为这可能是由于安装了过时的版本。 我能够运行npm install history react-router-dom@next并解决了我的问题。

Answer 16

Switch 在较新的版本中已被弃用，使用路由，它会起到相同的作用。

Answer 17

通过安装工作：

npm install react-router-dom@5

在项目文件夹中

Answer 18

对我来说，安装这些类型后问题就消失了：

npm i @types/react-router-dom

我在这里找到的。

我最近刚刚升级到react-router-dom 6.3.0，这就是问题开始的时候。

顺便说一句， react-router 6.3.0 会在你安装react-router-dom 6.3.0 时自动安装，不需要单独安装。

Answer 19

您必须删除文件夹：“node_modules”并写下：

npm i react react-dom react-router-dom

这个对我有用。