Navegar programmaticamente usando o roteador de reação

Resposta (usando ganchos e Reage >16.8)

Você pode utilizar o novo gancho useHistory em Componentes Funcionais e Navegar Programmaticamente:

import { useHistory } from "react-router-dom";

function HomeButton() {
  let history = useHistory();
  // use history.push('/some/path') here
};

**React-Router 4.0.0+*** Resposta

No 4.0 e acima, use o histórico como um adereço do seu componente.

class Example extends React.Component {
   // use `this.props.history.push('/some/path')` here
};

NOTA: este.histórico não existe no caso do seu componente não ter sido renderizado por . Você deve utilizar para ter este.histórico.props.history em SeuComponente

**React-Router 3.0.0+*** Resposta

No 3.0 e acima, use o roteador como um adereço do seu componente.

class Example extends React.Component {
   // use `this.props.router.push('/some/path')` here
};

**React-Router 2.4.0+*** Resposta

Em 2.4 e acima, use um componente de ordem superior para obter o roteador como um adereço do seu componente.

import { withRouter } from 'react-router';

class Example extends React.Component {
   // use `this.props.router.push('/some/path')` here
};

// Export the decorated class
var DecoratedExample = withRouter(Example);

// PropTypes
Example.propTypes = {
  router: React.PropTypes.shape({
    push: React.PropTypes.func.isRequired
  }).isRequired
};

**React-Router 2.0.0+*** Resposta

Esta versão é retrocompatível com a 1.x, portanto não há necessidade de um Guia de Atualização. Apenas analisar os exemplos deve ser suficientemente bom.

Dito isto, se você quiser mudar para o novo padrão, há um módulo browserHistory dentro do roteador que você pode acessar com

Importar { browserHistory } de 'react-router'``.

Agora você tem acesso ao histórico do seu navegador, assim você pode fazer coisas como empurrar, substituir, etc... Como por exemplo:

BrowserHistory.push('/some/path')`

Leitura adicional: Histórias e Navegação

**React-Router 1.x.x*** Resposta

Eu não vou entrar em detalhes de atualização. Você pode ler sobre isso no Guia de Atualização

A principal mudança sobre a questão aqui é a mudança do Mixin de Navegação para a História. Agora está utilizando o histórico do navegadorAPI para mudar a rota, então vamos utilizar pushState() a partir de agora.

Aqui está um exemplo usando o Mixin:

var Example = React.createClass({
  mixins: [ History ],
  navigateToHelpPage () {
    this.history.pushState(null, `/help`);
  }
})

Note que esta História vem do projeto rackt/história. Não do próprio React-Router.

Se você não quiser usar o Mixin por alguma razão (talvez por causa da classe ES6), então você pode acessar o histórico que você obtém do roteador do this.props.history. Ele só será acessível para os componentes renderizados pelo seu Roteador. Então, se você quiser utilizá-lo em qualquer componente infantil, ele precisa ser passado como um atributo via props.

Você pode ler mais sobre o novo lançamento em sua 1.0.x documentação

Aqui está uma página de ajuda específica sobre como navegar fora do seu componente

Ele recomenda pegar uma referência history = createHistory() e chamar replaceState sobre isso.

**Roteiro de Reacção 0.13.x*** Resposta

Eu entrei no mesmo problema e só consegui encontrar a solução com o mixin de Navegação que vem com o re-roteador.

Eis como eu o fiz

import React from 'react';
import {Navigation} from 'react-router';

let Authentication = React.createClass({
  mixins: [Navigation],

  handleClick(e) {
    e.preventDefault();

    this.transitionTo('/');
  },

  render(){
    return (<div onClick={this.handleClick}>Click me!</div>);
  }
});

Eu pude chamar transiçãoPara() sem a necessidade de acessar `.contextual''.

Ou você pode tentar a "classe" ES6

import React from 'react';

export default class Authentication extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(e) {
    e.preventDefault();

    this.context.router.transitionTo('/');
  }

  render(){
    return (<div onClick={this.handleClick}>Click me!</div>);
  }
}

Authentication.contextTypes = {
  router: React.PropTypes.func.isRequired
};

React-Router-Redux***

Nota: se você estiver usando Redux, há outro projeto chamado React-Router-Redux que lhe dá redutores de ligação para o ReactRouter, usando um pouco a mesma abordagem que React-Redux faz

React-Router-Redux tem alguns métodos disponíveis que permitem a simples navegação a partir de criadores de ação interna. Estes podem ser particularmente úteis para pessoas que têm arquitetura existente no React Native, e desejam utilizar os mesmos padrões no React Web com o mínimo de caldeiraria.

Explore os seguintes métodos:

• push(location)
• substitua(localização)``
• "go(número)`
• goBack()
• 'goForward()``

Aqui está um exemplo de uso, com Redux-Thunk:

**./actioncreators.js***

import { goBack } from 'react-router-redux'

export const onBackPress = () => (dispatch) => dispatch(goBack())

**./viewcomponent.js***

 {
    e.preventDefault()
    this.props.onBackPress()
  }}
>
  CANCEL

**React-Router v2***

Para o lançamento mais recente (v2.0.0-rc5), o método de navegação recomendado é empurrando diretamente para o botão de histórico. Você pode ver isso em ação no arquivo Navigating outside of Components doc.

Extrato relevante:

import { browserHistory } from 'react-router';
browserHistory.push('/some/path');

Se estiver utilizando o novo API do reator-router, você precisa fazer uso da history do this.props quando dentro dos componentes assim:

this.props.history.push('/some/path');

Ele também oferece pushState mas que é depreciado por avisos logados.

Se utilizar o react-router-redux', oferece uma funçãopush' que pode ser despachada assim:

import { push } from 'react-router-redux';
this.props.dispatch(push('/some/path'));

No entanto, isto só pode ser usado para alterar a URL, não para navegar realmente para a página.

Aviso: esta resposta abrange apenas as versões do ReactRouter antes da 1.0

Eu actualizarei esta resposta com casos de uso 1.0.0-rc1 depois!

Você pode fazer isso sem misturas também.

let Authentication = React.createClass({
  contextTypes: {
    router: React.PropTypes.func
  },
  handleClick(e) {
    e.preventDefault();
    this.context.router.transitionTo('/');
  },
  render(){
    return (<div onClick={this.handleClick}>Click me!</div>);
  }
});

O que se tem com contextos é que não é acessível a menos que você defina os `contextosTipos' na classe.

Quanto ao contexto, é um objeto, como os adereços, que são passados de pais para filhos, mas que é passado implicitamente, sem que seja preciso redeclarar os adereços cada vez. Ver https://www.tildedave.com/2014/11/15/introduction-to-contexts-in-react-js.html