Cannot read properties of undefined (reading 'location')

user_13970770 0
Viewed 11095

I wrote this code:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { BrowserRouter as Router, Route } from "react-router-dom";
import AboutPage from './pages/aboutPage'

ReactDOM.render(
  <React.StrictMode>
    <Router>
    <Route path='/' component={ App }/>
    <Route path='/about' component={ AboutPage }/>
    </Router>
  </React.StrictMode>,
  document.getElementById('root')
);

Why doesn't it work? I'm getting this error:

How can I fix it? React v17.0.2, React-router v5.2.1, React-router-dom v6.0.1

react-router-dom react-router reactjs router
3 Answers

A Route is only ever to be used as the child of Routes element, never rendered directly. So just wrap your <Route> in a <Routes>

<Router>
  <Routes>
    <Route path='/' component={ App }/>
    <Route path='/about' component={ AboutPage }/>
  </Routes>
</Router>
user_101288120

In my case to fix that issue, it was the react-router-dom that wasn't match the react-router package.

For example:

    "react-router": "^5.3.3",
    "react-router-dom": "^5.3.3",
    "@types/react-router-dom": "^5.3.3",
user_20143290

Wrap your component (the one where you're using props.location) with the withRouter to inject the former:

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

class MyComponent extends React.Component {
...
}

export default withRouter(MyComponent);
user_127613690
Related