Skip to content

React Router, why useLocation and useHistory might return undefined

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')
)

→ Here's my latest YouTube video

→ Get my React Beginner's Handbook

→ I wrote 17 books to help you become a better developer, download them all at $0 cost by joining my newsletter

JOIN MY CODING BOOTCAMP, an amazing cohort course that will be a huge step up in your coding career - covering React, Next.js - next edition February 2025

Bootcamp 2025

Join the waiting list