reactjs - 使用 this.props.history.push ('/' 的用户注销重定向不会重定向到所需页面

Question

用户注销后，我希望页面导航回我的主屏幕，'/'。我正在尝试使用 this.props.history.push('/') 但是，该页面仍保留在当前个人资料页面 /profile#signout 上并读取错误无法读取未定义的属性“props”。

这是我的 logOutUser() 函数的代码。我正在使用 Firebase 进行注销。

logOutUser(){
  var tempname = login.getUser();
  firebase
  .auth()
  .signOut()
  .then(function() {
    alert("Goodbye " + tempname + "!");
    this.props.history.push('/');
  })
  .catch(function(error) {
    alert(error.message);
  });
}

这是由我的 navClicked() 函数调用的。此函数检查用户当前所在的导航部分并将所需信息返回到渲染部分:

navClicked(name) {
     if(name === "signout"){
       return(
         <button className="btn btn-info" onClick={this.logOutUser()}>
           Sign Outed
         </button>
       )
     }
 }

最后这是我的渲染部分。我正在使用react-bootstrap 卡并检查在个人资料卡上单击了哪个导航。

render(){
        const length = window.location.href.length;
        const current = window.location.href.slice(30, length);
        return(
        <Card className = "cardosettings" style={{ width: '60rem', height: '35rem'}}>
          <Card.Header className = 'header0'>
            <Nav variant="tabs" defaultActiveKey="#profile">
                <Nav.Item >
                    <Nav.Link className = 'linka' href="#profile">Edit Profile</Nav.Link>
                </Nav.Item>
                <Nav.Item>
                    <Nav.Link className = 'linka' href="#settings">Account Settings</Nav.Link>
                </Nav.Item>
                <Nav.Item>
                    <Nav.Link className = 'linka' href="#signout">Sign Out</Nav.Link>
                </Nav.Item>
            </Nav>
        </Card.Header>
            <ListGroup variant="flush">
              {this.navClicked(current)}
            </ListGroup>
          </Card>
        )
    }

非常感谢任何提示!

Answer 1

尝试更改 logoutUser 和箭头函数的回调，以避免与 this 发生绑定(bind)问题:

logOutUser = () => {
  var tempname = login.getUser();
  firebase
  .auth()
  .signOut()
  .then(() => {
    alert("Goodbye " + tempname + "!");
    this.props.history.push('/');
  })
  .catch(function(error) {
    alert(error.message);
  });
}

此外，如果您正在处理默认情况下可能无法访问历史记录的子组件，请使用 router-router-dom 中的 withRouter 包装您的组件。

import { withRouter } from 'react-router-dom';
export default withRouter(YourComponent);