无效的钩子调用。尝试使用 useHistory 时，只能在函数组件的主体内部调用钩子

Question

所以我尝试使用 history.push('/') 重定向到帐户页面，但它给出了无效的挂钩调用错误。我以基本形式使用它。我阅读了反应参考，但仍然收到此错误

import React, { Component } from "react";
import Home from "./Pages/Services";
import Account from "./Pages/Account";
import { BrowserRouter, Switch, Route } from "react-router-dom";
import Navbar from "./Navbar/Navbar";
import Signup from "./Pages/Account/signup";
import Signin from "./Pages/Account/signin";
import { AuthProvider } from "../contexts/AuthContext";

class App extends Component {
  state = {
    dark: true,
    acc: "name",
  };
  render() {
    return (
      <React.Fragment>
        <BrowserRouter>
          <Navbar acc={this.state.acc} dark={this.state.dark} />

          <AuthProvider>
            <Switch>
              <Route
                exact
                path="/"
                render={(props) => <Home {...props} dark={this.state.dark} />}
              />
              <Route
                path="/account"
                render={(props) => (
                  <Account {...props}  />
                )}
              />
              <Route path="/signup" component={Signup} />
              <Route path="/signin" component={Signin} />
            </Switch>
          </AuthProvider>
        </BrowserRouter>
      </React.Fragment>
    );
  }
 
}

export default App;

这是signin.jsx

    import { Form, Button, Card, Alert } from "react-bootstrap";
    import "bootstrap/dist/css/bootstrap.min.css";
    import { useAuth } from "../../../../src/contexts/AuthContext";
    import { Link, useHistory } from "react-router-dom";
    
    export default function Signin() {
      const history = useHistory();
      const emailRef = useRef();
      const passwordRef = useRef();
      const passwordConfirmRef = useRef();
      const { signin } = useAuth();
      const [error, setError] = useState("");
      const [loading, setLoading] = useState(false);
    
      async function handleSubmit(e) {
        e.preventDefault();
    
        try {
          setError("");
          setLoading(true);
          await signin(emailRef.current.value, passwordRef.current.value);
          history.push("/account");
        } catch {
          setError("Failed to Sign in");
        }
    
        setLoading(false);
      }
    
      return (
        <>
          <Card>
            <Card.Body>
              <h2 className="text-center mb-4">Sign In</h2>
              {error && <Alert variant="danger">{error}</Alert>}
              <Form onSubmit={handleSubmit}>
                <Form.Group controlId="formBasicEmail">
                  <Form.Label>Email address</Form.Label>
                  <Form.Control
                    type="email"
                    placeholder="Enter email"
                    ref={emailRef}
                  />
                </Form.Group>
    
                <Form.Group controlId="formBasicPassword">
                  <Form.Label>Password</Form.Label>
                  <Form.Control
                    type="password"
                    placeholder="Password"
                    ref={passwordRef}
                  />
                </Form.Group>
    
                <Button
                  disabled={loading}
                  variant="primary w-100 mt-2"
                  type="submit"
                >
                  Sign In
                </Button>
              </Form>
            </Card.Body>
          </Card>
          <div className="w-100 text-center mt-2">
            Don't have an account ? <Link to="/signup">Sign Up</Link>
          </div>
        </>
      );
    }

我的依赖

 "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    
  },

谁能帮我弄清楚我的实现是否有问题，我是新手