TypeError：_this2.props.history未定义

Question

嗨，我是React js的新手，我正在构建一个完整的堆栈反应应用程序。我在登录期间使用Auth文件检查身份验证状态我调用登录功能，在注销时我正在调用logh函数，如auth.js文件。但是当我调用logout函数时，我得到“TypeError：_this2.props.history is undefined “错误。请帮助我错了

This is Auth.js file

class Auth {
  constructor() {
    this.authenticated = '';
  }

  login(cb) {
    this.authenticated = true;
    cb();
    console.log("login status"+this.authenticated)
  }

  logout(cb) {
    this.authenticated = false;
    cb();
    console.log("LOGOUT status"+this.authenticated)
  }

  isAuthenticated() {
    console.log("check status"+this.authenticated)
    return this.authenticated;
  }
}
export default new Auth();

这是调用logout函数的文件

import React from 'react'
import zenologo from './images/zenologo.png'
import { Link } from 'react-router-dom'
import Auth from "./Auth";
import API from './api'

class Header extends React.Component {

    constructor(props){
        super(props)
        this.state = {
            admin : JSON.parse(localStorage.getItem('adminProfile'))
        }
        this.handleLogout = this.handleLogout.bind(this);
    }

    handleLogout() {
        localStorage.removeItem('adminProfile')
        localStorage.removeItem('access_token')
        localStorage.removeItem('user')
        localStorage.removeItem('itemDetails')
        localStorage.removeItem('query')
        Auth.logout(() => {
            this.props.history.push('/admin/login')
          });
    }


    render(){
        return <header className="header">
        <div class="container-fluid">
            <nav>
                <div className="dashboard_logoarea text-center">
                    <a href="#" className="menu_bar"><i className="fa fa-bars" aria-hidden="true"></i></a>
                    <a href="#"><img src={zenologo} alt="" /></a>
                </div>
                <div className="right_loggedarea">
                    <ul>
                        <li className="dropdown">
                            <a href="#" className="dropdown-toggle" role="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><img  className="img-circle" style={{width:30,height:30}} src={API.getBaseImageURL()+'/'+this.state.admin.profileImage+"?"+new Date().getTime()} alt="" />My Account
                                <i className="fa fa-sort-desc" aria-hidden="true"></i>
                            </a>
                            <div className="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                <Link to='/admin/profile'><i className="fa fa-user" aria-hidden="true"></i>My Profile</Link>    
                                <Link to='/admin/edit_profile'><i className="fa fa-edit" aria-hidden="true"></i>Edit Profile</Link>
                                <a onClick={this.handleLogout}><i className="fa fa-power-off" aria-hidden="true"></i>Logout</a>
                            </div>
                        </li>
                    </ul>
                </div>
           </nav>
           </div>
        </header>;
    } 
}

export default Header

Answer 1

您需要从withRouter导入react-router-dom，然后将其与export连接，就​​像这个export default withRouter(Header);

Answer 2

使用npm安装历史库摆脱使用this.props.history这可能会帮助你我认为如此https://www.npmjs.com/package/history