Comment utiliser l'historique pour contrôler le routage dans React-Router (tutoriel détaillé)

Cet article vous présente principalement des informations pertinentes sur la façon dont React-Router v4 utilise l'historique pour contrôler les sauts de routage. L'article le présente en détail à travers un exemple de code, qui a une certaine valeur d'apprentissage de référence pour les études ou le travail de tous les amis qui en ont besoin. , suivez-moi et apprenez ensemble.

Avant-propos

Cela fait longtemps que React Router v4 n'est pas officiellement sorti. Cette semaine, j'ai mis à niveau une étagère React. J'utilise toujours la version v2.7.0, j'ai donc décidé de mettre également à niveau le routeur, juste pour "essayer quelque chose de nouveau"...

Il y a des rumeurs dans le monde selon lesquelles le responsable maintient actuellement les versions 2.x et 4.x. (ヾ(｡ꏿ﹏ꏿ)ﾉﾞHé, en ce moment, je crois que vous qui êtes aussi intelligents que moi découvrirez également, où est passé ReactRouter v3 ? Vous avez tout perdu ?? Bala est sorti du pétrin ??? Osez vous m'en donnez une parfaite ? Explication ! ?) En fait, la version 3.x n'introduit aucune nouveauté par rapport à la version 2.x, elle supprime juste les avertissements de certaines API obsolètes de la version 2.x. Selon le plan, lorsque de nouveaux projets sans bagage historique souhaitent utiliser la version stable de ReactRouter, ils doivent utiliser ReactRouter 3.x. La version 3.x est actuellement encore en phase bêta, mais sera officiellement publiée avant la version 4.x. Si vous utilisez déjà la version 2.x, la mise à niveau vers la version 3.x ne nécessitera aucune modification de code supplémentaire.

Problème

Lorsque nous utilisons React-Router v3, nous voulons sauter le chemin, nous le gérons généralement comme ça

• Nous exportons l'historique du navigateur depuis React-Router.

• Nous utilisons browserHistory.push() et d'autres méthodes pour opérer les sauts de routage.

Semblable à ce qui suit

import browserHistory from 'react-router';
export function addProduct(props) {
 return dispatch =>
 axios.post(`xxx`, props, config)
 .then(response => {
 browserHistory.push('/cart'); //这里
 });
}

mais !! Voici le problème, dans React-Router v4, l'exportation de l'historique du navigateur, etc. n'est pas fournie~~

Que faire ? Comment contrôler les sauts de routage ? ? ?

Solution

1. Utiliser withRouter

withRouter composant de haut niveau, qui fournit l'historique Laissez-vous utiliser~

import React from "react";
import {withRouter} from "react-router-dom";

class MyComponent extends React.Component {
 ...
 myFunction() {
 this.props.history.push("/some/Path");
 }
 ...
}
export default withRouter(MyComponent);

C'est la méthode officielle recommandée. Mais cette méthode est un peu inconfortable à utiliser. Par exemple, lorsque l'on veut utiliser le routage en redux, on ne peut transmettre que l'historique dans le composant. .

Pour l'utiliser dans des scénarios comme le code du chapitre des questions, nous devons transmettre un paramètre d'historique du composant. . .

2. Utiliser le contexte

react-router v4 expose un objet routeur via Contex dans le composant Routeur~

Utiliser le contexte dans les composants enfants, nous peut obtenir l'objet routeur, comme dans l'exemple suivant~

import React from "react";
import PropTypes from "prop-types";
class MyComponent extends React.Component {
 static contextTypes = {
 router: PropTypes.object
 }
 constructor(props, context) {
 super(props, context);
 }
 ...
 myFunction() {
 this.context.router.history.push("/some/Path");
 }
 ...
}

Bien sûr, utilisez cette méthode avec prudence~essayez de ne pas l'utiliser. Parce que React ne recommande pas d'utiliser le contexte. Il pourrait être abandonné dans les versions futures.

3. hack

En fait, le problème est que l'historique que nous avons transmis au composant Routeur dans la v3 a été à nouveau exposé, nous permettant d'appeler ~~

Le composant BrowserRouter de React-Router v4 crée son propre historique et ne nous l'expose pas pour référence. Embarrassant ~

Nous ne pouvons pas utiliser le BrowserRouter recommandé et toujours utiliser le composant Router. Nous créons l’histoire nous-mêmes, et d’autres endroits appellent l’histoire que nous avons créée. Regardez le code~

Nous créons nous-mêmes un historique

// src/history.js
import createHistory from 'history/createBrowserHistory';
export default createHistory();

Nous utilisons le composant Router

// src/index.js
import { Router, Link, Route } from 'react-router-dom';
import history from './history';
ReactDOM.render(
 <Provider store={store}>
 <Router history={history}>
  ...
 </Router>
 </Provider>,
 document.getElementById(&#39;root&#39;),
);

Nous pouvons l'utiliser comme ça à d'autres endroits

import history from './history';
export function addProduct(props) {
 return dispatch =>
 axios.post(`xxx`, props, config)
  .then(response => {
  history.push('/cart'); //这里
  });
}

4. J'insiste pour utiliser BrowserRouter

En effet, React-Router v4 recommande d'utiliser le composant BrowserRouter, et dans la troisième solution, nous avons abandonné ce composant et sommes revenus Retrait de l'utilisation du composant Routeur.

Que faire. Si vous allez jeter un œil au code source de BrowserRouter, je pense que vous comprendrez tout d’un coup.

Le code source est très simple, il n'y a pas grand-chose. Nous écrivons entièrement nous-mêmes un composant BrowserRouter, puis remplaçons le composant Router dans la troisième solution. hé-hé.

Cela se termine ici. J'utilise actuellement la troisième méthode Bien que la première méthode soit officiellement recommandée, je pense qu'elle est plus difficile à utiliser. ~

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.

Articles associés :

Implémentation du framework MVVM en js (tutoriel détaillé)

Comment requireJS implémente-t-il un chargeur de module ?

JSsearch imitant Taobao (tutoriel détaillé)

Quelles sont les différences entre on et click en jquery ?

Quelles sont les méthodes de liaison de style dans Angular 2+

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!