Warning: Failed prop type: The prop `history` is marked as required in `Router`, but its value is `undefined`. react-router-dom v^5.2.0

Running into this react router error and am confused because I’ve set up multiple react apps like this and have never had an issue. I ran npm update and am still having issues. It seems other people had this issue but that was with previous versions. Thanks in advance for the help!

index.js

import ReactDOM from 'react-dom';

import App from './App';

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

App.jsx

import React from 'react';
import { BrowserRouter as Route, Router, Switch } from 'react-router-dom';

import CompanyDetails from './pages/CompanyDetails';
import Home from './pages/Home';
import UpdateCompany from './pages/UpdateCompany';

const App = () => {
  return (
    <Router>
      <Switch>
        <Route exact path='/' component={Home} />
        <Route exact path='/companies/:id/update' component={UpdateCompany} />
        <Route exact path='/companies/:id' component={CompanyDetails} />
      </Switch>
    </Router>
  );
};

export default App;

Errors

• index.js:1 Warning: Failed prop type: The prop history is marked as required in Router, but its value is undefined.

• Router.js:20 Uncaught TypeError: Cannot read property ‘location’ of undefined

Answer

After debugging a bit I realized that my import statement:

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

needed to be:

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

I’m not sure why the order of the import statement matters but if someone could explain it to me I would appreciate it! ✨