React-Router 5.1.0+ Answer (en utilisant des crochets et React> 16.8)
Vous pouvez utiliser le nouveau useHistorycrochet sur les composants fonctionnels et naviguer par programme:
import { useHistory } from "react-router-dom";
function HomeButton() {
let history = useHistory();
// use history.push('/some/path') here
};
Réponse de React-Router 4.0.0+
Dans les versions 4.0 et supérieures, utilisez l'historique comme accessoire de votre composant.
class Example extends React.Component {
// use `this.props.history.push('/some/path')` here
};
REMARQUE: this.props.history n'existe pas dans le cas où votre composant n'a pas été rendu par <Route>. Vous devez utiliser <Route path="..." component={YourComponent}/>pour avoir this.props.history dans YourComponent
Réponse de React-Router 3.0.0+
Dans les versions 3.0 et supérieures, utilisez le routeur comme accessoire de votre composant.
class Example extends React.Component {
// use `this.props.router.push('/some/path')` here
};
React-Router 2.4.0+Réponse de
Dans les versions 2.4 et supérieures, utilisez un composant d'ordre supérieur pour obtenir le routeur comme accessoire de votre composant.
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+Réponse de
Cette version est rétrocompatible avec 1.x, il n'est donc pas nécessaire d'avoir un guide de mise à niveau. Le simple fait de parcourir les exemples devrait suffire.
Cela dit, si vous souhaitez passer au nouveau modèle, il y a un module browserHistory à l'intérieur du routeur auquel vous pouvez accéder avec
import { browserHistory } from 'react-router'
Maintenant, vous avez accès à l'historique de votre navigateur, vous pouvez donc faire des choses comme pousser, remplacer, etc ...
browserHistory.push('/some/path')
Pour en savoir plus:
Histoires et
navigation
Réponse de React-Router 1.xx
Je n'entrerai pas dans les détails de mise à niveau. Vous pouvez lire à ce sujet dans le Guide de mise à niveau
Le principal changement concernant la question ici est le passage de la navigation mixin à l'historique. Maintenant, il utilise l'historique du navigateurAPI pour changer d'itinéraire, nous allons donc utiliserpushState() partir de maintenant.
Voici un exemple utilisant Mixin:
var Example = React.createClass({
mixins: [ History ],
navigateToHelpPage () {
this.history.pushState(null, `/help`);
}
})
Notez que cela Historyvient de rackt / history projet . Pas de React-Router lui-même.
Si vous ne voulez pas utiliser Mixin pour une raison quelconque (peut-être à cause de la classe ES6), vous pouvez accéder à l'historique que vous obtenez du routeur this.props.history. Il ne sera accessible que pour les composants rendus par votre routeur. Donc, si vous souhaitez l'utiliser dans des composants enfants, il doit être transmis en tant qu'attribut viaprops .
Vous pouvez en savoir plus sur la nouvelle version sur leur documentation 1.0.x
Voici une page d'aide sur la navigation en dehors de votre composant
Il recommande de saisir une référence history = createHistory()et d'appeler replaceStateà cela.
Réponse de React-Router 0.13.x
J'ai rencontré le même problème et je n'ai trouvé la solution qu'avec le mixage de navigation fourni avec react-router.
Voici comment je l'ai fait
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>);
}
});
J'ai pu appeler transitionTo()sans avoir besoin d'accéder.context
Ou vous pouvez essayer le fantaisie 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
Remarque: si vous utilisez Redux, il y a un autre projet appelé
ReactRouter-Redux qui vous donne Redux pour les liaisons ReactRouter, en utilisant un peu la même approche que
React-Redux fait
React-Router-Redux a quelques méthodes disponibles qui permettent une navigation simple depuis les créateurs d'actions. Ceux-ci peuvent être particulièrement utiles pour les personnes qui ont une architecture existante dans React Native, et qui souhaitent utiliser les mêmes modèles dans React Web avec un minimum de surcharge.
Explorez les méthodes suivantes:
push(location)replace(location)go(number)goBack()goForward()
Voici un exemple d'utilisation, avec 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>