How to make component update after call this.props.history.push? - reactjs

Question

I'm coding login function that would return to home component after finish save token data to client.
However, when it go back to homepage, i can not use setState because do not have any componentWillMount or componentDidMount function was called.
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() never been called so can not set value for isAuthorization = true anyway.

Answer 1

A couple of notes:
1) I'm assuming App.js is actually the holder of all your routes. In this case, App.js is never unmounted from ReactDOM. What you want to do is define a separate component for your "/" route, keeping your App.js clean, focusing only on rendering routes. We will call this component Home.
2) I'm not familiar with any library that uses SessionStorage(). You might be looking for the sessionStorage native JS library. This will have methods called setItem and getItem for storing and retrieving your token.
3) With the separate Home component, we can call componentDidMount() to retrieve the token.
With that in mind we can do the following as a template on how you can achieve the functionality you're looking for: 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;