Na versão atual do React Router (v3) eu posso aceitar uma resposta do servidor e utilizar o `browserHistory.push' para ir para a página de resposta apropriada. No entanto, isto está't disponível na v4, e I'não tenho certeza qual é a maneira apropriada de lidar com isto.
Neste exemplo, utilizando Redux, components/app-product-form.js chama this.props.addProduct(props)
quando um usuário submete o formulário. Quando o servidor retorna um sucesso, o usuário é levado para a página Carrinho.
// actions/index.js
export function addProduct(props) {
return dispatch =>
axios.post(`${ROOT_URL}/cart`, props, config)
.then(response => {
dispatch({ type: types.AUTH_USER });
localStorage.setItem('token', response.data.token);
browserHistory.push('/cart'); // no longer in React Router V4
});
}
Como posso fazer um redirecionamento para a página do carrinho de compras a partir da função para o React Router v4?
O React Router v4 é fundamentalmente diferente do v3 (e anterior) e você não pode fazer browserHistory.push()
como costumava fazer.
Esta discussão parece relacionada se você quiser mais informações:
- Criar um novo
browserHistory
ganhou't funciona porque<BrowserRouter>
cria sua própria instância de história, e ouve as mudanças sobre isso. Então uma instância diferente irá alterar a url mas não atualizar o<BrowserRouter>
.- A
browserHistory
não é exposta pelo reator-router na v4, apenas na v2.
Em vez disso, você tem algumas opções para fazer isso:
Em vez disso, você deve utilizar o componente de alta ordem withRouter
e embrulhá-lo no componente que vai empurrar para a história. Por exemplo, o componente `withRouter':
<!-- linguagem: lang-js -->
importar Reagir de "reagir";
importar { comRouter } de "reagir-router-dom";
classe MyComponent estende React.Component {
...
myFunction() {
this.props.history.push("/some/Path");
}
...
}
export default withRouter(MyComponent);
Consulte a documentação oficial para mais informações:
contexto
APIUsar o contexto pode ser uma das soluções mais fáceis, mas sendo uma API experimental é instável e sem suporte. Utilize-a apenas quando tudo o resto falhar. Aqui's um exemplo:
<!-- linguagem: lang-js -->
importar Reagir de "reagir";
importar tipos de adereço de " tipos de adereço";
classe MyComponent estende React.Component {
contexto estáticoTipos = {
router: PropTypes.object
}
construtor(adereços, contexto) {
super(adereços, contexto);
}
...
myFunction() {
this.context.router.history.push("/some/Path");
}
...
}
Dê uma olhada na ** documentação oficial*** sobre o contexto:
Se você quer que sua aplicação seja estável, don't use o contexto. É uma API experimental e é provável que ela se quebre em futuras versões do React.
Se você insiste em usar contexto apesar destes avisos, tente isolar seu uso de contexto para uma pequena área e evite usar a API de contexto diretamente quando possível para que seja mais fácil atualizar quando a API mudar.
Foi assim que eu o fiz:
import React, {Component} from 'react';
export default class Link extends Component {
constructor(props) {
super(props);
this.onLogout = this.onLogout.bind(this);
}
onLogout() {
this.props.history.push('/');
}
render() {
return (
<div>
<h1>Your Links</h1>
<button onClick={this.onLogout}>Logout</button>
</div>
);
}
}
Utilize this.props.history.push('/cart');
para redirecionar para a página do carrinho será guardado no objecto histórico.
Aproveita, Michael.
Este.contexto.histórico.push" não vai funcionar.
Consegui fazer com que o empurrão funcionasse assim:
static contextTypes = {
router: PropTypes.object
}
handleSubmit(e) {
e.preventDefault();
if (this.props.auth.success) {
this.context.router.history.push("/some/Path")
}
}