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.