Soy nuevo en React + mecanografiado y estoy tratando de usar "react-router-dom" para crear un componente de inicio de sesión para comunicarme con mi servidor backend.

Básicamente, estoy tratando de hacer una clase de "Inicio de sesión" que, al enviar un formulario, activará una solicitud de búsqueda en mi servidor. Si la respuesta de mi servidor es correcta, navegaré a otra página con los datos de entrada.

Todo funciona bien hasta que trato de navegar a mi segunda página. La cuestión es que no quiero que las credenciales de inicio de sesión aparezcan en la URL, y la regla de los ganchos me impide usar el gancho de navegación después de verificar el código de estado de mi respuesta de búsqueda.

¿Alguien tiene una idea de cómo puedo lograr esto? Cualquier ayuda sería apreciada.

Editar: código actual agregado

 interface MyProps{ } interface MyStates{ username: string, password: string } class Modal extends React.Component<MyProps, MyStates>{ constructor(props: MyProps){ super(props); this.state = {username: '', password: ''}; this.handleUsernameChange = this.handleUsernameChange.bind(this); this.handlePasswordChange = this.handlePasswordChange.bind(this); this.handleLoginSubmit = this.handleLoginSubmit.bind(this); } handleUsernameChange(event: React.ChangeEvent<HTMLInputElement>) { this.setState({username: event.target.value}); } handlePasswordChange(event: React.ChangeEvent<HTMLInputElement>) { this.setState({password: event.target.value}); } handleLoginSubmit(event: React.FormEvent<HTMLFormElement>) { event.preventDefault(); var request = { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ username: this.state.username, password: this.state.password}) } fetch('login',request) .then(response => { if(!response.ok) throw new Error(response.statusText); else { // window.location.replace('/AfterLogin.html?name=' + this.state.username) } }) } render(){ return <div className='Modal'> <form onSubmit= { this.handleLoginSubmit }> <label> Username <input type='text' name='username' value={this.state.username} onChange={this.handleUsernameChange} /> </label> <p/> <label> Password <input type='password' name='password' value={this.state.password} onChange={this.handlePasswordChange} /> </label> <p/> <button> Sign In</button> </form> </div> } }