How to fix the warning in react-router v4?

Hello. Can't do that in react-router.

There is a Login component that needs to transfer to another page upon successful login.
Doing it this way(by the way, is there a better way?):

class Login extends Component {
 constructor(props, state) {
//...
 //some listener websocket, if the server's response in the end to do so:
this.props.history.push('/main');
}
}


Login component is in the component Routes, something like:
const Routes = () => {
 return (
the <div>
 // ...
 <route exact path="/login" component="{Login}"></route>
 // ....
</div>
)
};


accordingly, he is invoked in the root component
// class so-and-so 
render() {
 return (
 <router> 
 <routes> 
</routes></router>
)
}


react on this matter swears here so:
Warning: Can only update a mounted or mounting component. This usually means you called setState, replacestate will, or forceUpdate on an unmounted component. This is a no-op.

Please check the code for the Login component.


How to be?
June 10th 19 at 15:19
2 answers
June 10th 19 at 15:21
Solution
Your problem is solved as follows:
class Login extends Component {
 componentWillMount() {
...
 if(isLoggedIn) {
this.props.history.push('/main');
}
}
...
}
I don't understand something, or I just poorly explained that I had ((

in General. the chat app on websockets. Login is the start screen, where moving with all the ranting and if the user is not authorized.
actually, this is just input for the name and the submit button. when you click on it, the socket emetic something like
socket.emit('login', this.state.name);
in the constructor of the Login socket is listening event 'login-status', which the server responds to the above request socket. if successful (if name is available) program installs as something like {isLogin: true .... } and change the route to the Main
//I have not found how else do you programmatically change the current route in react-router v4
this.props.history.push('/main');

otherwise, displays a message that this user already in the chat.
the whole thing seems to work but very confused assaults from react.

if you do something wrong, I will be glad to hear it! - vickie_Zulauf commented on June 10th 19 at 15:24
you're not supposed in the constructor to do. He is said in plain text. Use the options life cycle.
componentDidMount - to perform actions(calls to api and other) immediately after mounting.
componentWillReciveProps - to update the state according to the updated props.
componentDidUpdate - to perform actions depending on changes in state and props
Until the component is mounted to update it. - Lenny.Botsfo commented on June 10th 19 at 15:27
came, thank you! - vickie_Zulauf commented on June 10th 19 at 15:30
,
componentWillMount - to perform actions(requests to the api, and others) immediately after mounting.
- you probably meant componentDidMount? Otherwise, translation: to perform actions TO the (will - be) mount.
p.s. cc - dannie.Stehr commented on June 10th 19 at 15:33
Yes!!! componentWillMount - soon starcat! Thank you, corrected!
note. - Lenny.Botsfo commented on June 10th 19 at 15:36
June 10th 19 at 15:23
class Login extends Component {
 componentWillMount() {
 //some listener websocket, if the server's response in the end to do so:
this.props.history.push('/main');
}

 render() {
 return <div>Loading...</div>
}
}

Find more questions by tags React