错误：无效的钩子调用。 Hooks 只能在函数组件内部调用

Question

我正在尝试构建一个登录页面，当在登录/注册页面中单击创建帐户按钮时，检查用户的身份验证，它应该返回到主页。但它显示错误。 主要问题是 in invalid hook call。 当我尝试时。

const history = useHistory();

出现错误提示无效的钩子调用。当我尝试时。

const history = useHistory; 

问题已解决，但 history.push("/") 在这种情况下不起作用，并给出错误消息说 history.push is not a fucntion。

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

function Login() {
  let 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("/");
        }
      })
      .catch((error) => alert(error.message));


  };