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