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