TypeError: Cannot read properties of undefined (reading 'location') When Adding Route

Question

The react app was working until I added React Router it showes this error

TypeError: Cannot read properties of undefined (reading 'location')

React App

import { Router, Switch, Route } from "react-router-dom";
function App() {
 return (
   <Router>
     <div className="App">
       <Header />
       <Switch>
         <Route path="/" component={MainPage}></Route>
       </Switch>
     </div>
   </Router>
 );
}

export default App;

Sadeen Alaa · Accepted Answer · 2021-10-07 10:17:08Z

1

react-router-dom doesn't export Router instead it exports BrowserRouter so the code should be one of the following

First

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

      <div className="App">
        <Header />
        <Switch>
          <Route path="/" component={MainPage}></Route>
        </Switch>
      </div>
    </BrowserRouter>

Second

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

      <div className="App">
        <Header />
        <Switch>
          <Route path="/" component={MainPage}></Route>
        </Switch>
      </div>
    </Router>

answered Oct 7, 2021 at 10:17

Sadeen Alaa

7671 gold badge6 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

TypeError: Cannot read properties of undefined (reading 'location') When Adding Route

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related