Error:TypeError: Cannot read property 'push' of undefined

Question

我已经通过 firebase\react 进行了 login\Signup 身份验证，如果登录或注册正确，我会尝试将用户定向到下一页。但我不断收到上述错误“错误：TypeError：无法读取未定义的属性 'push'”。我猜在调用 history.push 的确切位置和方式方面存在问题。有人可以提供快速修复吗？在我的部分代码下方。

App.js

import React, { useEffect, useState } from "react";
import "./App.css";
import Contacts from "./components/Contacts";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import HomePage from "./components/HomePage";
import Login from "./components/Login";
import { useHistory } from "react-router-dom";
import { auth } from "./firebase";

    const App = () => {
      const history = useHistory();
      const [user, setUser] = useState("");
      const [email, setEmail] = useState("");
      const [password, setPassword] = useState("");
      const [emailError, setEmailError] = useState("");
      const [passwordError, setPasswordError] = useState("");
      const [hasAccount, setHasAccount] = useState(false);
    
      const clearInputs = () => {
        setEmail("");
        setPassword("");
      };
    
      const clearErrors = () => {
        setEmailError("");
        setPasswordError("");
      };
    
      const handleLogin = () =>{
        
        clearErrors();
        auth.signInWithEmailAndPassword(email, password)
        .then((u) => {
          console.log('successfully logged in')
          history.push('/HomePage')
          
        })
        .catch((err) => {
          console.log("Error:" + err.toString());
        });
      };
    
      const handleSignup = () => {
        clearErrors();
        auth
          .createUserWithEmailAndPassword(email, password)
          .then((u) => {
            console.log("successfully signed up");
            history.push('/HomePage')
            
          })
          .catch((err) => {
            console.log("Error:" + err.toString());
          });
      };
    
      const authListener = () => {
        auth.onAuthStateChanged((user) => {
          if (user) {
            clearInputs();
            setUser(user);
          } else {
            setUser("");
          }
        });
      };
    
      useEffect(() => {
        authListener();
      }, []);
    
      return (
        <Router>
          <div className="row">
            <div className="col-md-8 offset-md-2">
              <Switch>
                <Route exact path="/HomePage">
                  <HomePage />
                </Route>
                <Route exact path="/">
                  <Login
                    email={email}
                    setEmail={setEmail}
                    setPassword={setPassword}
                    password={password}
                    handleLogin={handleLogin}
                    handleSignup={handleSignup}
                    emailError={emailError}
                    passwordError={passwordError}
                    hasAccount={hasAccount}
                    setHasAccount={setHasAccount}
                  />
                </Route>
                <Route exact path="/Contacts">
                  <Contacts />
                </Route>
              </Switch>
            </div>
          </div>
        </Router>
      );
    };
    
    export default App;

Answer 1

<Router> 组件应该比该组件高一级。否则您将无法访问历史记录。 useHistory 仅适用于已在 <Router> 中的组件。无论你在哪里使用 <App /> 你都可以将它包装在 .it 应该像

<Router><App /></Router>

Error:TypeError: Cannot read property 'push' of undefined

Error:TypeError: Cannot read property 'push' of undefined

react-router

react-hooks

browser-history