BrowserRouter v4 - 'BrowserRouter' is not defined react/jsx-no-undef

Question

I want to use BrowserRouter in my react app. I have nested my top most component in the BrowserRouter tags as shown:

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import App from './App';
import registerServiceWorker from './registerServiceWorker';


ReactDOM.render((
    <BrowserRouter>
        <App/>
    </BrowserRouter>
), document.getElementById('root')); 

registerServiceWorker();

And I am getting the following error:

./src/index.js
Line 9:  'BrowserRouter' is not defined  react/jsx-no-undef

I have installed react-router-dom and the dependancy is in my package.json file. So why am I getting this?

Answer 1

You imported it as Router, so you should call it as <Router> as well.

Answer 2

You need to import a library for that

npm i @emailjs/browser

Move to index.js and import the following

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