I was having some head scratching moment when using the useLocation and useHistory hooks with React Router.

const history = useHistory()
const location = useLocation()

They both returned undefined.

Turns out I was adding the Router to the DOM with <Router>...</Router> in the same component I was using useLocation and useHistory.

Then I found this issue that explained I could not do that.

I had to move the <Router>...</Router> wrapping of my component one level up. In my case, I did that in the index.js file:

import { BrowserRouter as Router } from 'react-router-dom'

...

ReactDOM.render(
  <React.StrictMode>

      <Router>
        <App />
      </Router>
  </React.StrictMode>,
  document.getElementById('root')
)

Lessons in this unit:

0:	Introduction
1:	Introduction to React Router
2:	React Router, how to get data from a dynamic route
3:	How to pass props to a child component via React Router
4:	The Reach Router Tutorial
5:	▶︎ React Router, why useLocation and useHistory might return undefined