How to fix error: Attempted import error: 'Route' is not exported from 'react-router-dom'

Question

-- Update: This started working when I just stopped the development server, quit VSCode and restarted it again. Not sure what caused it.

Busy learning React and ran into this error. I have tried several other SO posts but can't seem to get an answer to my problem.

I'm following the guidance to use only react-router-dom and import BrowserRouter and Route from react-router-dom. But I'm getting an error:

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

Not sure what I'm doing wrong here?

Here is my 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;

Here is my 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"
  ]
}

From what I've been reading, other posts still use the react-router separately, but if I'm understanding the documentation correctly, I'm not supposed to do that in this version? Also, I'm following a tutorial that does this exactly and it seems to work.

Any advice would be greatly appreciated, thanks!

Answer 1

Close the server and restart it. It Works Fine.

npm start or yarn start

Answer 2

I was having the same issue. You may have a conflict with NPM and YARN. I deleted my yarn.lock and ran it again with only package.lock; and it worked.

You should only use Yarn or NPM.

Answer 3

I was stuck on this as well... For me it worked when the version of "react-router" and "react-router-dom" matched.

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

Answer 4

This issue is happening because of the version of react-router-dom. Try updating the react-router-dom to version 6.

Just run the command:

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;

try this way

Answer 6

You should add this line to your components.

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

My problem was solved by this method.

Answer 7

problem solved in me

npm uninstall react-router

and

npm uninstall react-router-dom

then

npm install react-router react-router-dom

use version 5.0.0

Answer 8

The error occurs because you are using react-router v5 instead of v6-

Follow these steps-

Step 1:

npm uninstall react-router

---

npm uninstall react-router-dom

Step 2:

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

Step 3: Restart your server

And you are all set to go!

Answer 9

For react-router-dom v6 and greater, use this in your 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;

Changes done from v5 to v6

Switch changed to Routes

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

changed to

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

Answer 10

May be this is happening because you haven not installed it. You should run this command:

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

You need to make sure what the return type in App class. You are returning BrowserRouter. So when you do an import you need to make sure you put the correct class name which you are importing.

BrowserRouter is being returned not Router.

So it should be

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

or

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

Answer 15

I think this may be due to an outdated version being installed. I was able to run npm install history react-router-dom@next and it fixed my issue.

Answer 16

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

Answer 17

worked by installing:

npm install react-router-dom@5

in the project folder

Answer 18

For me the problem went away after I installe these types:

npm i @types/react-router-dom

which I found here .

I had just recently upgraded to react-router-dom 6.3.0, and that's when the problem began.

By the way, react-router 6.3.0 will install automatically when you install react-router-dom 6.3.0, no need to install it separately.

Answer 19

You must delete folder: "node_modules" and write this:

npm i react react-dom react-router-dom

It works for me.