If you type user in the text box, it will go to the user page, and if you type admin, it will go to the admin page.
This is my code.
constructor(props) {
super(props);
this.state = {
userType : 0
};
this.handleLogin = this.handleLogin.bind(this);
}
If the userType is 0, it tries to go to the user page, and if it is 1, it tries to go to the admin page.
handleLogin() {
if(this.state.id==='admin'){
this.setState({userType : 1});
}
else{
this.setState({userType : 0});
}
}
I changed the userType to 1 when admin was entered.
I have confirmed that it works well until this operation.
<Link to={this.state.userType === 0 ? '/userPage' : '/adminPage'}>
<button className='loginButton' onClick={this.handleLogin}>Login</button>
</Link>
The problem seems to be this part. But I don't know how to fix it. Please, give me a solution.
You should not use the Link and a button at the same time. You can simply do like this :
<Link to={this.state.id==='admin' ? '/adminPage' : '/userPage'}>
Login
</Link>
If you want to redirect user to another page on an onClick event, then histoty.push() would the right way to do it. The declarative routing should be used here. You can implement this way-
handleLogin() {
if(this.state.id==='admin'){
this.props.history.push("/adminPage");
}
else{
this.props.history.push("/userPage");
}
}
<button className='loginButton' onClick={this.handleLogin}>Login</button>