Quick Solutions to Handle Exception ‘TypeError: history.push is not a function’

JavaScript has been an integral part of programming that has given the liberty to programmers to storm into the world of interactive designs, be it for websites or web applications. JavaScript is like the heart of programming, and that’s we reason a lot of people try to learn the language. Encountering errors is also a part of programming, but is the dream of every programmer to code the way they get no error. Sometimes, the error ‘TypeError: history.push is not a function’ pops up which can cause inconvenience for you.

I would like to add that it is normal to have errors, and you don’t need to panic when you get this error warning. In this article, we are going to guide you on how to handle the error efficiently. Check out how you get the error warning

How do you land up in error?

The error occurs when you try to redirect two forms to the homepage once the first of your form is submitted. Have a look at the program code that returns the error message

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


import firebase from "firebase/app";

const Session = ({ id }) => {
  const classes = useStyles();

  ....other codes above

  const handleSubmit = (e) => {
    e.preventDefault();
    try {
      const userRef = firestore.collection("users").doc(id);
      const ref = userRef.set(
        {
          items: {
            id,
            ...variable names here
          },
        },

        { merge: true }
      );

      console.log(" saved");
      stocksCounter();
      history.push("/");  <-- history.push
    } catch (err) {
      console.log(err);
    }
  };

  

  //2nd submit-----------------------------------------------------------
  ...other codes here
  const handleSubmit2 = (e) => {
    e.preventDefault();
    try {
      const userRef = firestore.collection("users").doc(scanResult);
      const ref = userRef.set(
        {
          items: {
           ..variable names here
          },
        },
        { merge: true }
      );

      console.log(" saved");
      stocksCounter();
    } catch (err) {
      console.log(err);
    }
  };

  return (
  ....codes here
  );
};

export default withRouter(Session);

Solutions to Fix the Error ‘TypeError: history.push is not a function’

Solution 1 – The withRouter to wrap navigation component

It is the solution you can try to get rid of the error message. To do so, you need to have an access to the history object through pops of component. Use the following code

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

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

export default withRouter(Navigation);

You can also try an alternative to resolve the error. You can also wrap the component withRouter using the useHistory hook. Have a look at the code

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;

Solution 2 – Use the new v6 command

Another way to fix the exception is to use the new command. Just replace the useHistory with useNavigation with the v6 command.

You need to use the New v6 code

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

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

Instead of old v5 code:

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

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

In the case you are using an old one, you need to replace it with the new one.

Solution 3 – Use the ‘useHistory’ hook

This is an effective solution when it comes to solving the ‘TypeError: history.push is not a function’.  In the case, you are willing to go to another page during the execution, the react-router-dom is used to navigate urls to components.  You can change the url with the help of useHistory. Follow the below code to resolve the issue

const history = useHistory();
history.push('/')

Conclusion

All the solutions we shed light on are effective to help you solve the error ‘TypeError: history.push is not a function’.  I really hope you find it useful! Don’t forget to drop a message in the below box!

Reference Source: https://developer.mozilla.org/en-US/docs/Web/API/History/pushState

https://peaku.co/questions/53487-typeerror:-historypush-no-es-una-funcion-en-mi-curso-de-opi-udemy