3

Tenho uma tela (em React.js) chamada Cadastro.js. Nela eu tenho um formulário e o botão cadastrar

Ao clicar nesse botão, queria que direcionasse para a tela de login, que é a Login.js.

Como faço isso ?

Segue abaixo meu index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import { Route, Link, BrowserRouter as Router } from 'react-router-dom'
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import Cadastro from './Cadastro';
import Contact from './Contact';
import Login from './Login';
import logo from './people.png'


const routing = (
<Router>
  <div>
      <ul>
          <li>
              <a href="logo"><img src={logo} alt="logo"/></a>
           </li>
           <li>
              <Link to="/">Home</Link>
           </li>
           <li>
              <Link to="/cadastro">Cadastro</Link>
           </li>
           <li>
              <Link to="/contact">Contato</Link>
           </li>
           <li>
              <Link to="/login">Login</Link>
           </li>
        </ul>


   <Route exact path="/" component={App}/>
   <Route path="/cadastro" component={Cadastro}/>
   <Route path="/contact" component={Contact}/>
   <Route path="/login" component={Login}/>
  </div>
</Router>
)

ReactDOM.render(routing, document.getElementById('root'));

Minha página de cadastro:

import React, { Component } from 'react';
import './App.css';

class Cadastro extends Component {
  constructor(args){
    super(args)
    this.state = {

        firstName: '',
        lastName: '',
        gender:'',
        country:'',
        email: '',
        password:''   
    }
}

onChange(e){
  this.setState({
    [e.target.name]: e.target.value
  })
}
-------------------CRIEI ESSA FUNÇÃO MAS NÃO SEI COMO FUNCIONAR --------------
chamaLogin = () => {
  window.location.href ='/login.js'
 }


    render() {
    return(
        <div className="login-page">
        <div className="form">
          <form className="register-form">
          <h1>Cadastro</h1>

          <div className="firstName">
            <label htmlFor="firstName"> Nome </label>
            <input value={this.state.firstName} onChange={this.onChange.bind(this)} name="firstName" id="firstName" type="text"></input>
          </div>


          <div className="lastName">
            <label htmlFor="lastName"> Sobrenome </label>
            <input value={this.state.lastName} onChange={this.onChange.bind(this)} name="lastName" id="lastName" type="text"></input>
          </div>


          <div className="gender">
          <label htmlFor="gender"> Gênero </label>
          <select value={this.state.gender} onChange={this.onChange.bind(this)} name="gender" id="gender">
          <option value="">Selecione</option> 
           <option value="m">Masculino</option> 
           <option value="w">Feminino</option>  
           </select>
          </div>


        <div>
          <label htmlFor="country">Estado</label>
            <select value={this.state.country} onChange={this.onChange.bind(this)} id="country" name="country">
            <option value="">Selecione</option> 
            <option value="ac">Acre</option> 
            <option value="al">Alagoas</option> 
            <option value="am">Amazonas</option> 
            <option value="ap">Amapá</option> 
            <option value="ba">Bahia</option> 
            <option value="ce">Ceará</option> 
            <option value="df">Distrito Federal</option> 
            <option value="es">Espírito Santo</option> 
            <option value="go">Goiás</option> 
            <option value="ma">Maranhão</option> 
            <option value="mt">Mato Grosso</option> 
            <option value="ms">Mato Grosso do Sul</option> 
            <option value="mg">Minas Gerais</option> 
            <option value="pa">Pará</option> 
            <option value="pb">Paraíba</option> 
            <option value="pr">Paraná</option> 
            <option value="pe">Pernambuco</option> 
            <option value="pi">Piauí</option> 
            <option value="rj">Rio de Janeiro</option> 
            <option value="rn">Rio Grande do Norte</option> 
            <option value="ro">Rondônia</option> 
            <option value="rs">Rio Grande do Sul</option> 
            <option value="rr">Roraima</option> 
            <option value="sc">Santa Catarina</option> 
            <option value="se">Sergipe</option> 
            <option value="sp">São Paulo</option> 
            <option value="to">Tocantins</option> 
          </select>
        </div>


          <div className="email">
            <label htmlFor="email"> E-mail </label>
            <input value={this.state.email} onChange={this.onChange.bind(this)} name="email" id="email" type="email"></input>
          </div>


          <div className="password">
              <label htmlFor="password"> Senha </label>
              <input value={this.password} onChange={this.onChange.bind(this)} name="password" id="password" type="password"></input>
            </div>

----------------AQUI É ONDE NÃO SEI O QUE FAZER NO BOTÃO ------------------
          <div className="creatAccount">
            <button type="submit"
            onClick={() => chamaLogin()}
            >Cadastrar</button>
          </div>

        </form>
      </div>
      </div>
     )
   }
}

export default Cadastro;
2
  • Só um pequeno comentário window.location.href não funciona no React pois não existe rota. Commented 20/03/2019 às 17:16
  • ah então não ia funcionar mesmo né ... achei que funcionaria. Commented 20/03/2019 às 17:17

2 Respostas 2

5

Como o padrão mais usado no ReactJS é criar Single Page Applications, você vai precisar utilizar uma biblioteca que crie as rotas do lado do client(browser), pois não existe um servidor ditando as rotas.

A biblioteca mais famosa é a React Router. Veja como usar aqui

Ex.:

import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

Import Cadastro from './cadastro'


function AppRouter() {
  return (
    <Router>
      <div>
        <Link to="/cadastro/" className="btn">Cadastre-se</Link>

        <Route path="/" exact component={Index} />
        <Route path="/cadastro/" component={Cadastro} />
      </div>
    </Router>
  );
}

export default AppRouter;

[UPDATE]:

Para resolver o que você quer usando uma função você vai precisar renderizar o componente <Redirect /> baseado no estado se o botão foi clicado.

Como fazer:

import React, { Component } from 'react';
import { Redirect } from 'react-router'
import './App.css';

class Cadastro extends Component {
  constructor(args){
    super(args)
    this.state = {
        firstName: '',
        lastName: '',
        gender:'',
        country:'',
        email: '',
        password:''
        redirect: false   
    }
}

onChange(e){
  this.setState({
    [e.target.name]: e.target.value
  })
}

chamaLogin = () => {
  this.setState({
    redirect: true
  })
 }
render() {

  if(this.state.redirect) {
    return <Redirect to="/login/" />
  }
  else {
    return (
      <div className="login-page">
      <div className="form">

         ... // Seu código de form atual. Removi só para simplificar.

          <div className="creatAccount">
            <button type="submit"
            onClick={() => chamaLogin()}
            >Cadastrar</button>
          </div>

        </form>
      </div>
      </div>
    )
  }
}

export default Cadastro;

15
  • Obrigada por responder. Eu criei as rotas mas apenas para clicar nos campos dos sites e ser redirecionado para a sua tela. Exemplo : Ao clicar em Home, vai para a Home. Ao clicar em Contato, vai para contato. Porém, pensei que para chamar a tela no botão seria algum evento javascript. Então quer dizer que eu consigo fazer uma rota para esse botão ? Commented 20/03/2019 às 16:50
  • A forma mais simples de redirecionar é usando a tag Link e NavLink do react-router que já faz toda a logica por trás dos panos, como no exemplo acima. Você consegue usar essa tag e só estilizar com css para ter o estilo do botão? @VerônicaEmschermann. Commented 20/03/2019 às 16:56
  • eu sou nova em reactJS, estou aprendendo aos poucos...mas nem sempre em vídeos e artigos eu consigo achar o que quero. Eu estou fazendo uma tela de cadastro apenas, para que ao clicar no botão de "cadastrar" ja vai para a página de login direto. Eu estou tentando escrever meu código mas está comprido kkkk`. Coloquei meu index.js (onde estão as rotas) na minha pergunta. Commented 20/03/2019 às 17:05
  • Vou criar outra resposta mostrando como fazer isso agora que você colocou o código Commented 20/03/2019 às 17:17
  • 1
    Atualzei o código da resposta, agora está usando outra lógica. Pode testar ? Commented 20/03/2019 às 20:24
2

Troca o BrowserRouter pelo Router, usa um history manual, só fazer isso:

import { createBrowserHistory } from "history"
const history = createBrowserHistory({
  basename: "/"
})
window.redirect = history.push

agora você pode redirecionar de qualquer lugar da sua aplicação

onClick() {
  redirect("/home")
}

Pra usar o Router

function App() {
  return(
    <Router history={history}>
    ...a mesma coisa que o BrowserRouter, só muda a prop ali do history
  )
}
13
  • Oi marcelo, obrigada por responder. Gostei desse jeito que você mostrou. Tenho uma dúvida, ainda não testei, tudo isso eu escrevo no index.js ? E a função eu chamo na tela que quero ? É isso ? Commented 21/03/2019 às 12:22
  • Sim, você coloca apenas uma vez o history, mas você prescisa colocar push, assim: window.redirect = history.push, porque o window é uma variável global. Se você estiver usando SSR, só colocar global no lugar do window
    – Marcelo
    Commented 21/03/2019 às 12:24
  • Certo fiz assim : index.js eu fiz conforme você orientou (desde o import do createBrowserHistory até window.redirect ....etc) Na minha página login.js eu preciso colocar uma função no link "Esqueceu sua conta? Cadastre-se" , então eu coloquei algo como : onClick() { redirect("/cadastro") }. Porém está dando erro " Line 72: 'redirect' is not defined no-undef " Commented 21/03/2019 às 12:35
  • Esse erro está acontecendo no seu browser ou no seu linter ?
    – Marcelo
    Commented 21/03/2019 às 12:40
  • no browser e no terminal do visualCode Commented 21/03/2019 às 12:41

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 .