Resposta do React-Router 5.1.0+ (usando ganchos e React> 16.8)
Você pode usar o novo useHistorygancho em Componentes Funcionais e navegar programaticamente:
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 suporte do seu componente.
class Example extends React.Component {
// use `this.props.history.push('/some/path')` here
};
NOTA: this.props.history não existe no caso em que seu componente não foi renderizado <Route>. Você deve usar o <Route path="..." component={YourComponent}/>this.props.history em YourComponent
React-Router 3.0.0+ Resposta
No 3.0 e acima, use o roteador como suporte do seu componente.
class Example extends React.Component {
// use `this.props.router.push('/some/path')` here
};
React-Router 2.4.0+ Resposta
Na 2.4 e acima, use um componente de ordem superior para obter o roteador como suporte 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 é compatível com a versão 1.x, portanto não há necessidade de um Guia de atualização. Apenas passar pelos exemplos deve ser bom o suficiente.
Dito isso, se você deseja mudar para o novo padrão, há um módulo browserHistory dentro do roteador que você pode acessar com
import { browserHistory } from 'react-router'
Agora você tem acesso ao histórico do navegador, para poder executar ações como empurrar, substituir, etc ...
browserHistory.push('/some/path')
Leitura adicional:
Histórias e
navegação
Resposta do React-Router 1.xx
Não entrarei 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 Navigation mixin para o History. Agora, ele está usando a API do histórico do navegador para alterar a rota, e usaremos a pushState()partir de agora.
Aqui está um exemplo usando o Mixin:
var Example = React.createClass({
mixins: [ History ],
navigateToHelpPage () {
this.history.pushState(null, `/help`);
}
})
Observe que isso Historyvem do projeto rackt / history . Não do próprio React-Router.
Se você não quiser usar o Mixin por algum motivo (talvez por causa da classe ES6), poderá acessar o histórico que obtém do roteador this.props.history. Ele estará acessível apenas para os componentes renderizados pelo seu roteador. Portanto, se você quiser usá-lo em qualquer componente filho, ele precisará ser transmitido como um atributo via props.
Você pode ler mais sobre a nova versão na documentação 1.0.x
Aqui está uma página de ajuda especificamente sobre como navegar fora do seu componente
Ele recomenda pegar uma referência history = createHistory()e solicitar replaceStateisso.
Resposta do roteador React 0.13.x
Eu entrei no mesmo problema e só consegui encontrar a solução com o Navegador mixin que acompanha o reat-router.
Aqui está como eu fiz isso
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>);
}
});
Consegui ligar transitionTo()sem a necessidade de acessar.context
Ou você pode experimentar o sofisticado ES6 class
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á um outro projeto chamado
ReactRouter-Redux que lhe dá Redux ligações para ReactRouter, usando um pouco a mesma abordagem que
Reagir-Redux faz
O React-Router-Redux possui alguns métodos disponíveis que permitem uma navegação simples a partir de criadores de ação interna. Isso pode ser particularmente útil para pessoas que possuem arquitetura existente no React Native e desejam utilizar os mesmos padrões no React Web com o mínimo de sobrecarga.
Explore os seguintes métodos:
push(location)replace(location)go(number)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
<button
disabled={submitting}
className="cancel_button"
onClick={(e) => {
e.preventDefault()
this.props.onBackPress()
}}
>
CANCEL
</button>