React Router, why useLocation and useHistory return undefined

This content originally appeared on flaviocopes.com and was authored by flaviocopes.com

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

This content originally appeared on flaviocopes.com and was authored by flaviocopes.com

Print Share Comment Cite Upload Translate Updates

APA

flaviocopes.com | Sciencx (2021-02-08T05:00:00+00:00) React Router, why useLocation and useHistory return undefined. Retrieved from https://www.scien.cx/2021/02/08/react-router-why-uselocation-and-usehistory-return-undefined/

MLA

" » React Router, why useLocation and useHistory return undefined." flaviocopes.com | Sciencx - Monday February 8, 2021, https://www.scien.cx/2021/02/08/react-router-why-uselocation-and-usehistory-return-undefined/

HARVARD

flaviocopes.com | Sciencx Monday February 8, 2021 » React Router, why useLocation and useHistory return undefined., viewed ,<https://www.scien.cx/2021/02/08/react-router-why-uselocation-and-usehistory-return-undefined/>

VANCOUVER

flaviocopes.com | Sciencx - » React Router, why useLocation and useHistory return undefined. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/02/08/react-router-why-uselocation-and-usehistory-return-undefined/

CHICAGO

" » React Router, why useLocation and useHistory return undefined." flaviocopes.com | Sciencx - Accessed . https://www.scien.cx/2021/02/08/react-router-why-uselocation-and-usehistory-return-undefined/

IEEE

" » React Router, why useLocation and useHistory return undefined." flaviocopes.com | Sciencx [Online]. Available: https://www.scien.cx/2021/02/08/react-router-why-uselocation-and-usehistory-return-undefined/. [Accessed: ]

rf:citation

» React Router, why useLocation and useHistory return undefined | flaviocopes.com | Sciencx | https://www.scien.cx/2021/02/08/react-router-why-uselocation-and-usehistory-return-undefined/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.