Como usar o Redirect no novo Reactjs Reactjs
Estou usando o último módulo react-router da versão, chamado Reactor-router-dom, que se tornou o padrão ao desenvolver aplicações web com React. Eu quero saber como fazer um redirecionamento após um pedido POST. Eu tenho feito este código, mas depois do pedido, nada acontece. Eu reviso na web, mas todos os dados são sobre versões anteriores do roteador React, e não com a última atualização.
Código:
import React, { PropTypes } from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import { Redirect } from 'react-router'
import SignUpForm from '../../register/components/SignUpForm';
import styles from './PagesStyles.css';
import axios from 'axios';
import Footer from '../../shared/components/Footer';
class SignUpPage extends React.Component {
constructor(props) {
super(props);
this.state = {
errors: {},
client: {
userclient: '',
clientname: '',
clientbusinessname: '',
password: '',
confirmPassword: ''
}
};
this.processForm = this.processForm.bind(this);
this.changeClient = this.changeClient.bind(this);
}
changeClient(event) {
const field = event.target.name;
const client = this.state.client;
client[field] = event.target.value;
this.setState({
client
});
}
async processForm(event) {
event.preventDefault();
const userclient = this.state.client.userclient;
const clientname = this.state.client.clientname;
const clientbusinessname = this.state.client.clientbusinessname;
const password = this.state.client.password;
const confirmPassword = this.state.client.confirmPassword;
const formData = { userclient, clientname, clientbusinessname, password, confirmPassword };
axios.post('/signup', formData, { headers: {'Accept': 'application/json'} })
.then((response) => {
this.setState({
errors: {}
});
<Redirect to="/"/> // Here, nothings happens
}).catch((error) => {
const errors = error.response.data.errors ? error.response.data.errors : {};
errors.summary = error.response.data.message;
this.setState({
errors
});
});
}
render() {
return (
<div className={styles.section}>
<div className={styles.container}>
<img src={require('./images/lisa_principal_bg.png')} className={styles.fullImageBackground} />
<SignUpForm
onSubmit={this.processForm}
onChange={this.changeClient}
errors={this.state.errors}
client={this.state.client}
/>
<Footer />
</div>
</div>
);
}
}
export default SignUpPage;
94
3
Você tem que utilizar
setState
para definir uma propriedade que irá renderizar o `dentro do seu método
render()`.Por exemplo...
Você também pode ver um exemplo na documentação oficial: https://reacttraining.com/react-router/web/example/auth-workflow
Dito isto, sugiro que coloque a chamada API dentro de um serviço ou algo assim. Então você poderia apenas usar o objeto
history
para rotear programticamente. É assim que a integração com redux funciona.Mas acho que tens as tuas razões para o fazer desta maneira.
Aqui um pequeno exemplo como resposta ao título como todos os exemplos mencionados são complicados na minha opinião, assim como no oficial.
Você deve saber como transportar o es2015, bem como tornar o seu servidor capaz de lidar com o redirecionamento. Aqui está um snippet para o expresso. Mais informações relacionadas com isto podem ser encontradas aqui.
Certifique-se de colocar isto abaixo de todas as outras rotas.
Este é o arquivo .jsx. Repare como o caminho mais longo vem primeiro e fique's mais geral. Para os caminhos mais gerais, use o atributo exato.
Tente algo assim.