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

Question

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

Answer 1

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}`);

Answer 2

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;