Cannot read property ‘history’ of undefined (useHistory hook of React Router 5)

by

It’s because the react-router context isn’t set in that component. Since its the <Router> component that sets the context you could use useHistory in a sub-component, but not in that one.

Here is a very basic strategy for solving this issue:

const AppWrapper = () => {
  return (
    <Router> // Set context
      <App /> // Now App has access to context
    </Router>
  )
}

const App = () => {
  let history = useHistory(); // Works!
...
// Render routes in this component

Then just be sure to use the “wrapper” component instead of App directly.

More Related Contents:

  1. useNavigate() may be used only in the context of a component
  2. React : difference between and
  3. How to create a protected route?
  4. React-router-v6 access a url parameter
  5. React Router v4 renders multiple routes
  6. How to pass params into link using React router v6?
  7. react-router-dom v6 useNavigate passing value to another component
  8. Detect Route Change with react-router
  9. Simple Conditional Routing in Reactjs
  10. Invariant failed: You should not use outside a
  11. React Router Dom v6 shows active for index as well as other subroutes
  12. React – TypeError: Cannot read properties of undefined (reading ‘params’)
  13. Error: useHref() may be used only in the context of a component. It works when I directly put the url as localhost:3000/experiences
  14. react app showing empty page when redirecting on production build
  15. React App goes blank after importing React-Router-Dom
  16. React Router 4 Nested Routes not rendering
  17. Children won’t render when using a layout in ReactJS
  18. How to go back to previous route in react-router-dom v6
  19. React Router V6 – Error: useRoutes() may be used only in the context of a component
  20. Programmatically navigate using React router
  21. Component does not remount when route parameters change
  22. React.createElement: type is invalid — expected a string
  23. Programmatically navigating in React-Router v4
  24. How to tell webpack dev server to serve index.html for any route
  25. react-router vs react-router-dom, when to use one or the other?
  26. How to create a protected route with react-router-dom?
  27. How to nest routes in React Router v4?
  28. Passing values through React-Router v4
  29. How to create dynamic refs in functional component- Using useRef Hook
  30. Put A Warning If Page Refresh in ReactJS

Leave a Comment