Как сделать обновление компонента после вызова this.props.history.push?

Question

Я кодирую функцию входа в систему, которая будет возвращать домашний компонент после завершения сохранения данных токена на клиенте.Однако, когда он возвращается на домашнюю страницу, я не могу использовать setState, потому что не было вызвано никакой функции componentWillMount или componentDidMount.

Login.js

axios.post(`${Config.API_URL}/users/login`, param)
    .then(response => {
        if (response) {
            this.setState({
                errorCode : response.status
            });
        }
        if(response.status===ErrorCode.SUCCESS){
            var authorization = {"authorization": response.headers.authorization.toString()}
            SessionStorage.saveLocalStorage(authorization);
            this.props.history.push("/");
        }
    })

App.js

 componentWillMount() {
    if(SessionStorage.isAuthorization()){
      this.setState({
        isAuthorization : true
      });
    }
    console.log('Component Will MOUNT!')
 }

ComponentWillMount () никогда не вызывался, поэтому в любом случае невозможно установить значение для isAuthorization = true.

Answer 1

Пара заметок:

1) Я предполагаю, что App.js фактически является держателем всех ваших маршрутов. В этом случае App.js никогда не отключается от ReactDOM. То, что вы хотите сделать, это определить отдельный компонент для вашего "/" маршрута, сохраняя ваш App.js чистым, фокусируясь только на рендеринге маршрутов. Мы назовем этот компонент Home.

2) Я не знаком ни с одной библиотекой, которая использует SessionStorage(). Возможно, вы ищете sessionStorage нативную библиотеку JS. У него будут методы с именем setItem и getItem для хранения и извлечения вашего токена.

3) С отдельным компонентом Home мы можем вызвать componentDidMount() для получения токена.

Имея это в виду, мы можем сделать следующее в качестве шаблона того, как вы можете достичь требуемой функциональности: https://codesandbox.io/s/suspicious-leftpad-moqs2

App.js

class App extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <BrowserRouter>
          <div>
            <Switch>
              <Route path="/" component={Home} exact />
              <Route path="/login" component={Login} />
            </Switch>
          </div>
        </BrowserRouter>
      </Provider>
    );
  }
}

Home.js

import React from "react";
import { Link } from "react-router-dom";

class Home extends React.Component {
  state = {
    token: ""
  };

  componentDidMount() {
    const token = sessionStorage.getItem("authorization");
    if (token) {
      this.setState({
        token: token
      });
    }
  }
  render() {
    return (
      <div>
        <Link to="/login">Login</Link>
        <p>{this.state.token}</p>
      </div>
    );
  }
}

export default Home;

Login.js

import React from "react";
class Login extends React.Component {
  handleClick = () => {
    var token = 210;
    sessionStorage.setItem("authorization", token);
    this.props.history.push("/");
  };

  render() {
    return (
      <div>
        <button onClick={this.handleClick}>Login</button>
      </div>
    );
  }
}
export default Login;