Javascript – “Uncaught TypeError: history.push is not a function” error occurs

javascriptreact-routerreactjs

I have been developing a navigation bar. I wrote a function to switch screens and call it in button onClick. I wrapped the component in withRouter also. But the following error occurs:

Uncaught TypeError: history.push is not a function" error.

This is my code:

import { withRouter } from 'react-router-dom';

function Navigation(history) {
  const abc = path => {
    history.push(path);
  };

return(
<button onClick={() => abc('/user')}>User</button>
);}

export default withRouter(Navigation);

Thank you

Best Answer

You have wrapped the Navigation component with withRouter, thus you will need to access the history object via the component's props. You may choose to destructure your props as shown below:

function Navigation({ history }) {
  const abc = path => {
    history.push(path);
  };

  return (
    <button onClick={() => abc('/user')}>User</button>
  );
}

export default withRouter(Navigation);

Since you are working with functional components, an alternative way of doing things would be to make use of the useHistory hook, which spares you the need to wrap your component with withRouter:

import { useHistory } from 'react-router-dom';

function Navigation(props) {
  const history = useHistory();

  const abc = path => {
    history.push(path);
  };

  return (
    <button onClick={() => abc('/user')}>User</button>
  );
}

export default Navigation;
Related Topic