TypeError: history.push is not a function: How can I fix this?

I have these two forms and I wanted to redirect the user to the homepage after the first form submit handleSubmit. I have already declared withRouter and used it. But, it still has the error:

TypeError: history.push is not a function

Below are the codes:

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

Answer

use the useHistory hook.

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

Advertisement

Answer