Como fazer para passar à História no 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 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.
• A browserHistory não é exposta pelo reator-router na v4, apenas na v2.

Em vez disso, você tem algumas opções para fazer isso:

• Utilizar o componente "comRouter" de alta ordem

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

    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:

Você pode obter acesso às propriedades do objeto history e ao objeto ``'s match através do componente de ordem superior do withRouter. withRouter irá renderizar seu componente toda vez que a rota mudar com os mesmos adereços do `` renderizar adereços: {{ match, location, history }.

• Utilizar o contexto API

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

    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>
                Logout
            </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")
    }

}