Skip to main content
Explicando melhor a pergunta. + formatação
Fonte Link
LipESprY
  • 4,6mil
  • 2
  • 21
  • 36

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

Estou usando ReactJS, Tenho uma tela chamada "Cadastro.js", nela eu tenho um formulário e o botão "cadastrar" AoAo clicar nesse botão cadastrar, queria que direcionasse para a tela de login, que é a Login.js. Como faço isso ?Login.js.

Como faço isso ?

Segue abaixo meu index.js index.js:

Olá,

Estou usando ReactJS, Tenho uma tela chamada "Cadastro.js", nela eu tenho um formulário e o botão "cadastrar" Ao clicar nesse botão cadastrar, queria que direcionasse para a tela de login, que é a Login.js. Como faço isso ?

Segue abaixo meu index.js :

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:

Chamar tela em função javascript Como redirecionar para uma rota usando onClick e React Router

adicionou 1189 caracteres ao conteúdo
Fonte Link

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;

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;
Fonte Link
Carregando