Si escribe usuario en el cuadro de texto, irá a la página de usuario, y si escribe admin, irá a la página de administración.
Este es mi código.
constructor(props) { super(props); this.state = { userType : 0 }; this.handleLogin = this.handleLogin.bind(this); } Si el tipo de userType es 0, intenta ir a la página de usuario y si es 1, intenta ir a la página de administración.
handleLogin() { if(this.state.id==='admin'){ this.setState({userType : 1}); } else{ this.setState({userType : 0}); } } Cambié el tipo de userType a 1 cuando se ingresó el administrador. He confirmado que funciona bien hasta esta operación.
<Link to={this.state.userType === 0 ? '/userPage' : '/adminPage'}> <button className='loginButton' onClick={this.handleLogin}>Login</button> </Link>El problema parece ser esta parte. Pero no sé cómo arreglarlo. Por favor, dame una solución.
No debe usar el enlace y un botón al mismo tiempo. Simplemente puedes hacer esto:
<Link to={this.state.id==='admin' ? '/adminPage' : '/userPage'}> Login </Link>Si desea redirigir al usuario a otra página en un evento onClick , entonces histoty.push() sería la forma correcta de hacerlo. El enrutamiento declarativo debe usarse aquí. Puedes implementar de esta manera-
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>