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

user_13576131 0
Viewed 23594

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

react-router reactjs javascript
5 Answers

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;
user_109599400

Per react-router-dom v5 → v6 migration

The old useHistory has been replaced by useNavigate

@see https://reactrouter.com/docs/en/v6/api#usenavigate

Old v5 code:

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

const history = useHistory();
history.push(`/Search?${queryString}`);

New v6 code:

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

const navigate = useNavigate();
navigate(`/Search?${queryString}`);
user_28959480

Try this it works for me.
Using history(path) instead of history.push(path)

function NavItem1(props) { //Navigate to the home page
  const history = useNavigate();

  const redirect = path => {
    history(path);
  };

  return (  
    <a href="#"  className="icon-button" onClick={() => redirect('/')} >
    {props.icon}
  </a>

  )
}
user_59550800

You have to destruct all the props like Navigation({ history })

user_120850470

For umi users, we should add this:

import { history } from 'umi';
user_30484380
Related