How to redirect to a route using onClick and React Router

Question

I have a screen (in React.js) called Cadastro.js. In it I have a form and the button register

By clicking this button, I wanted you to direct to the login screen, which is the Login.js.

How do I do that ?

Go on down mine 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'));

My registration page:

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;

Answer 1

As the most commonly used standard in Reactjs is to create Single Page Applications, you will need to use a library that creates the client(browser) side routes, as there is no server dictating the routes.

The most famous library is the React Router. See how to use here

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]:

To solve what you want using a function you will need to render the component <Redirect /> based on the state if the button was clicked.

How to do:

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;

Answer 2

Exchange the BrowserRouter for Router, uses a manual history, just to do that:

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

now you can redirect from anywhere in your application

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

To use the Router

function App() {
  return(
    <Router history={history}>
    ...a mesma coisa que o BrowserRouter, só muda a prop ali do history
  )
}