如何修復錯誤：嘗試導入錯誤：“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

這個對我有用。