-1

Estou tentando implementar rotas em uma aplicação minha usando react-router-dom, e nessa parte, quero redirecionar o usuário após ele fazer o login corretamente para outra rota, mas por algum motivo não funciona.

no componente sign in:

class SignIn extends React.Component {
constructor(props) {
  super(props)
  this.state = {
    signInEmail : '',
    signInPassword : ''
  }
}

onEmailChange = (event) => {
  let value = event.target.value
  this.setState({signInEmail : value})
}

onPasswordChange = (event) => {
  let value = event.target.value
  this.setState({signInPassword : value})
}

onButtonSubmit = (event) => {
  event.target.disabled = true;
  fetch('http://localhost:3000/signin', {
    method : 'POST',
    headers : {'Content-Type' : 'application/json'},
    body : JSON.stringify({
      email : this.state.signInEmail,
      password : this.state.signInPassword,
    })
  })
  
  .then(response => response.json())
  .then(data => { 
    if(data.id) {
      this.props.loadUser(data)
      return <Navigate to="/homescreen"/>
      
    } else {
      event.target.disabled = false;
    }
  })
}

render() {
  return (
    <div className='signInBox'>
      <Form.Group className="mb-5" controlId="formBasicEmail">
        <Form.Label style={{display : 'flex', justifyContent : 'center',fontSize : '40px', fontWeight : '700', color : '#123533'}}>Sign In</Form.Label><br />
        <Form.Label>Email address</Form.Label>
        <Form.Control onInput={this.onEmailChange} type="email" placeholder="Enter email" />
      </Form.Group>
      <Form.Group className="mb-3" controlId="formBasicPassword">
        <Form.Label>Password</Form.Label>
        <Form.Control onInput={this.onPasswordChange} type="password" placeholder="Password" />
      </Form.Group>
      <Button variant="primary" type="submit" onClick={this.onButtonSubmit}>
        Sign In
      </Button>
    </div>
  )
}}

ao enviar o formulário (onButtonSubmit) a api valida as informações e se estiver tudo correto (data.id === true) ele seria redirecionado para a homescreen, mas não ocorre.

as rotas:

render () {
return (
  <BrowserRouter>
    <Toaster />
    <Particle />
    <Navigation isSignedIn={this.state.isSignedIn}/>
    <Routes>
      <Route 
        path='/homescreen' 
        element={(
          <>
            <Logo />
            <Entries User={this.state.user} />
            <ImageFormLink onInputChange={this.onInputChange} onSubmit={this.onSubmit} />
            <FaceDetection imageURL={this.state.imageURL} box={this.state.box}/>
          </>
        )}
      />
      <Route 
        path='/signin' 
        element={<SignIn loadUser={this.loadUser} onRouteChange ={this.onRouteChange}/>}
      />
      <Route 
        path='/register' 
        element={<Register loadUser={this.loadUser} onRouteChange ={this.onRouteChange}/>}
      />
      <Route 
        path='/ranking'
        element={<RankList onRouteChange={this.onRouteChange} ranking={this.state.ranking}/>}
      />
    </Routes>
  </BrowserRouter>
)}

li que no react-router-dom v6 deve-se usar o hook useNavigate em componentes de função, mas como no meu caso estou usando classes, queria saber se é possivel contornar isso (usando HOC ou alguma outra coisa). desde ja agradeço.

1 Resposta 1

0

Pro componente Navigate funcionar ele precisa ser renderizado em algum lugar, ou seja, ser retornado dentro da função render do seu componente de classe

No seu caso, o que precisa é acessar a propriedade history do contexto do react-router-dom que possui o método push(path, [state]), que executa esse redirecionamento em qualquer ponto do código

Pra acessar essa propriedade, você pode usar o componente de alta ordem withRouter

2
  • Entendi. No caso como estou usando o v6, no lugar do history se usa o hook navigate. Talvez eu tenha que transformar meu componente em função mesmo 31/10/2022 às 17:29
  • @WillianAlmeida se você quiser, pode manter como classe
    – Costamilam
    1/11/2022 às 2:45

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .