useLocation and useHistory undefined in React Router

Feb 8, 2021

Why do useLocation and useHistory return undefined in React Router? Because the Router wraps the same component using them, so move the Router one level up.

~~~

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

Tagged: React · All topics

~~~