Перенаправление пользователя с помощью this.props.history.push ('/') не перенаправляет на нужную страницу

Question

После выхода пользователя из системы я бы хотел, чтобы страница вернулась на мой домашний экран, '/'. Я пытаюсь использовать this.props.history.push('/'), однако страница остается на странице текущего профиля, /profile#signout и читает ошибку Cannot read property 'props' of undefined.

Вот мой код для моей функции 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>
       )
     }
 }

и, наконец, вот моя часть рендеринга. Я использую карты реакции-начальной загрузки и проверяю, какая навигация нажата на карточке профиля.

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:

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

Кроме того, если вы имеете дело с дочерним компонентом, который по умолчанию может не иметь доступа к историиоберните ваш компонент с withRouter из router-router-dom.

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