history.push is not a function

Question

i am trying to build a login page and when the create account button is clicked in the login /signup page, checking the authentication of the user, it should return to the home page. But it is showing the error

import React, { useState } from "react";
import "./Login.css";
import { Link, useHistory } from "react-router-dom";
import { auth } from "./firebase";

function Login() {
  const history = useHistory;
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  const signIn = (e) => {
    e.preventDefault();

  };

  const register = (e) => {
    e.preventDefault();

    auth
      .createUserWithEmailAndPassword(email, password)
      .then((auth) => {
   
        console.log(auth);
        if (auth) {
          history.push("/");
        }
      })

Please add more details to your question like the error message and the type of the error. — SENya, Jul 19 '21 at 22:42

score 1 · Answer 1 · answered Jul 19 '21 at 21:21

1

Just call the useHistory hook like this:

const history = useHistory()

answered Jul 19 '21 at 21:21

DoneDeal0

5,273
13
55
114

score 0 · Answer 2 · answered Jul 20 '21 at 13:46

The useHistory hook gives you access to the history instance that you may use to navigate.
How to use:
import { useHistory } from "react-router-dom";
function HomeButton() {
  let history = useHistory();
  function handleClick() {
    history.push("/home");
  }
  return (
    <button type="button" onClick={handleClick}>
      Go home
    </button>
  );
}

history.push is not a function

2 Answers2