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

【问题标题】：How to fix error: Attempted import error: 'Route' is not exported from 'react-router-dom'如何修复错误：尝试导入错误：“Route”未从“react-router-dom”导出
【发布时间】：2019-08-15 08:18:08
【问题描述】：

-- 更新：当我刚刚停止开发服务器、退出 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，但如果我正确理解文档，我不应该在这个版本中这样做吗？另外，我正在关注一个完全做到这一点的教程，它似乎有效。

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

【问题讨论】：

请用这个；从“react-router-dom”导入 { BrowserRouter, Route, Link };
react-router 5 可能存在依赖问题。reacttraining.com/blog/react-router-v5 现在将您的 react-router 降级到版本 4 并检查。
该代码似乎适用于 react-router-dom v5。 codesandbox.io/s/n5r3vz9980。你能发布一个可重现的例子吗
@TyroHunter 另一个在依赖项中没有 react-router
大家好。当我停止开发服务器、关闭 VSCode 并再次打开它并再次运行它时，它才开始工作。没有改变代码中的任何东西。我使用的是 yarn start 而不是 npm start，如果这意味着什么？谢谢。

标签： reactjs react-router

【解决方案1】：

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

npm start 或 yarn start

【讨论】：

【解决方案2】：

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

您应该只使用 Yarn 或 NPM。

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

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

这个方法解决了我的问题。

【讨论】：

【解决方案5】：

这个问题是由于 react-router-dom 的版本造成的。尝试将 react-router-dom 更新到版本 6。

只需运行命令：

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

【讨论】：

【解决方案6】：

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;

试试这个方法

【讨论】：

请详细说明，为什么提问者需要导入Switch，也请先评论而不是回答
参考此链接了解为什么要用 Switch reacttraining.com/react-router/web/api/Switch 包裹路由

【解决方案7】：

问题解决了

npm uninstall react-router

和

npm uninstall react-router-dom

然后

npm install react-router react-router-dom

使用版本 5.0.0

【讨论】：

【解决方案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 步：重启服务器

你们都准备好了！

【讨论】：

【解决方案9】：

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

npm start

【讨论】：

【解决方案10】：

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

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

【讨论】：

【解决方案11】：

对于 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>

【讨论】：

【解决方案12】：

这可能是因为您没有安装它。你应该运行这个命令：

npm i react-router

【讨论】：

【解决方案13】：

您的路线似乎在即将到来的版本中被贬值，所以使用这个导入：

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

【讨论】：

如果有的话，你会导入Route，而不是{Route}。导入{route}本质上就是导入react-router-dom/Route/Route

【解决方案14】：

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

返回的是BrowserRouter而不是Router。

应该是这样的

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

或

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

【讨论】：

【解决方案15】：

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

【讨论】：

【解决方案16】：

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

【讨论】：