React-Router 5.1.0+ Risposta (usando hook e React> 16.8)
È possibile utilizzare il nuovo useHistoryhook su Componenti funzionali e navigare programmaticamente:
import { useHistory } from "react-router-dom";
function HomeButton() {
let history = useHistory();
// use history.push('/some/path') here
};
React-Router 4.0.0+ Risposta
In 4.0 e versioni successive, utilizzare la cronologia come supporto del componente.
class Example extends React.Component {
// use `this.props.history.push('/some/path')` here
};
NOTA: this.props.history non esiste nel caso in cui il componente non sia stato renderizzato <Route>. Si dovrebbe usare <Route path="..." component={YourComponent}/>per avere this.props.history in YourComponent
React-Router 3.0.0+ Risposta
In 3.0 e versioni successive, utilizzare il router come supporto per il componente.
class Example extends React.Component {
// use `this.props.router.push('/some/path')` here
};
React-Router 2.4.0+ Risposta
In 2.4 e versioni successive, utilizzare un componente di ordine superiore per ottenere il router come supporto del 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+ Risposta
Questa versione è retrocompatibile con 1.x quindi non è necessaria una guida all'aggiornamento. Basta passare attraverso gli esempi dovrebbe essere abbastanza buono.
Detto questo, se desideri passare al nuovo modello, c'è un modulo browserHistory all'interno del router a cui puoi accedere
import { browserHistory } from 'react-router'
Ora hai accesso alla cronologia del tuo browser, quindi puoi fare cose come push, sostituire, ecc ... Come:
browserHistory.push('/some/path')
Ulteriori letture:
storie e
navigazione
React-Router 1.xx Risposta
Non entrerò nei dettagli di aggiornamento. Puoi leggere questo nella Guida all'aggiornamento
Il principale cambiamento sulla domanda qui è il passaggio dal mix di Navigazione alla Cronologia. Ora utilizza l'API della cronologia del browser per modificare il percorso, quindi utilizzeremo pushState()da ora in poi.
Ecco un esempio usando Mixin:
var Example = React.createClass({
mixins: [ History ],
navigateToHelpPage () {
this.history.pushState(null, `/help`);
}
})
Si noti che questo Historyproviene dal progetto rackt / history . Non dallo stesso React-Router.
Se non vuoi usare Mixin per qualche motivo (forse a causa della classe ES6), puoi accedere alla cronologia che ricevi dal router this.props.history. Sarà accessibile solo per i componenti resi dal tuo router. Pertanto, se si desidera utilizzarlo in qualsiasi componente figlio, è necessario passarlo come attributo tramite props.
Puoi leggere ulteriori informazioni sulla nuova versione nella loro documentazione 1.0.x.
Ecco una pagina di aiuto specifica sulla navigazione all'esterno del componente
Si consiglia di prendere un riferimento history = createHistory()e invocarlo replaceState.
React-Router 0.13.x Risposta
Ho riscontrato lo stesso problema e ho trovato la soluzione solo con il mix di navigazione fornito con reagente-router.
Ecco come l'ho fatto
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>);
}
});
Sono stato in grado di chiamare transitionTo()senza la necessità di accedere.context
Oppure potresti provare la fantasia 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 si sta utilizzando Redux, v'è un altro progetto chiamato
ReactRouter-Redux che ti dà Redux associazioni per ReactRouter, utilizzando un po 'lo stesso approccio che
React-Redux fa
React-Router-Redux ha alcuni metodi disponibili che consentono una semplice navigazione dall'interno dei creatori di azioni. Questi possono essere particolarmente utili per le persone che hanno un'architettura esistente in React Native e desiderano utilizzare gli stessi schemi in React Web con un minimo overhead della caldaia.
Esplora i seguenti metodi:
push(location)replace(location)go(number)goBack()goForward()
Ecco un esempio di utilizzo, con 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>