Com o react-router
eu posso utilizar o elemento Link
para criar links que são nativamente manuseados pelo router de reacção.
Vejo internamente que chama 'this.context.transitionTo(...)`.
Quero fazer uma navegação, mas não a partir de um link, a partir de uma seleção suspensa, por exemplo. Como posso fazer isso em código? O que é "this.context"?
Eu vi a mistura "Navegação", mas posso fazer isto sem misturas?
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 <Route>
. Você deve utilizar <Route path="..." component={SeuComponente}/>
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)
goBack()
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>
**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ção
push' 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