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;