So verwenden Sie den Verlauf zur Steuerung des Routings im React-Router (ausführliches Tutorial)

Dieser Artikel führt Sie hauptsächlich in die relevanten Informationen darüber ein, wie React-Router v4 den Verlauf zur Steuerung von Routing-Sprüngen verwendet. Der Artikel stellt ihn im Detail anhand von Beispielcode vor, der einen gewissen Referenz-Lernwert für alle hat, die ihn studieren oder arbeiten möchten Bitte folgen Sie mir und lernen Sie gemeinsam.

Vorwort

Es ist lange her, dass React Router v4 offiziell veröffentlicht wurde. Diese Woche habe ich ein React-Regal aktualisiert Ich verwende immer noch Version v2.7.0, also habe ich beschlossen, auch den Router zu aktualisieren, gerade rechtzeitig, um „etwas Neues auszuprobieren“...

Es gibt Gerüchte auf der Welt, dass der Beamte derzeit beide Versionen 2. x und 4.x. (ヾ(｡ꏿ﹏ꏿ)ﾉﾞHey, in diesem Moment glaube ich, dass Sie, der so schlau ist wie ich, auch herausfinden werden, wo ReactRouter v3 geblieben ist? Alles verloren?? Bala hat keine Probleme mehr??? Wagen Sie es, mir eine perfekte Erklärung zu geben?) Tatsächlich führt Version 3.x im Vergleich zu Version 2.x keine neuen Funktionen ein, sondern entfernt lediglich die Warnungen einiger veralteter APIs in Version 2.x. Wenn neue Projekte ohne historischen Ballast die stabile Version von ReactRouter verwenden möchten, sollten sie laut Plan ReactRouter 3.x verwenden. Die 3.x-Version befindet sich derzeit noch im Beta-Stadium, wird aber vor der 4.x-Version offiziell veröffentlicht. Wenn Sie bereits Version 2.x verwenden, sind für das Upgrade auf 3.x keine zusätzlichen Codeänderungen erforderlich.

Problem

Wenn wir React-Router v3 verwenden, möchten wir den Pfad überspringen, wir gehen normalerweise so damit um

• Wir exportieren den Browserverlauf vom React-Router.

• Wir verwenden browserHistory.push() und andere Methoden, um Routing-Sprünge durchzuführen.

Ähnlich wie folgt

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

aber!! Hier kommt das Problem, in React-Router v4 ist der Export von Browserverlauf usw. nicht vorgesehen~~

Was tun? Wie kontrolliere ich Routing-Sprünge? ? ?

Lösung

1. Verwendung mit Router

mit Router-High-Level-Komponente, die den Verlauf bereitstellt Lassen Sie ~

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);

Dies ist die offiziell empfohlene Methode. Die Verwendung dieser Methode ist jedoch etwas umständlich. Wenn wir beispielsweise Routing in Redux verwenden möchten, können wir den Verlauf nur in der Komponente übergeben. .

Um es in Szenarien wie dem Code im Fragenkapitel zu verwenden, müssen wir einen Verlaufsparameter von der Komponente übergeben. . .

2. Kontext verwenden

react-router v4 macht ein Router-Objekt über Contex in der Router-Komponente verfügbar~

Kontext in untergeordneten Komponenten verwenden, wir kann das Router-Objekt wie im folgenden Beispiel abrufen~

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");
 }
 ...
}

Natürlich sollten Sie diese Methode mit Vorsicht verwenden und versuchen, sie nicht zu verwenden. Weil React die Verwendung von Kontext nicht empfiehlt. In zukünftigen Versionen kann darauf verzichtet werden.

3. Hack

Tatsächlich besteht das Problem darin, dass der Verlauf, den wir in Version 3 an die Router-Komponente übergeben haben, erneut offengelegt wurde, sodass wir ~~

Die Komponente BrowserRouter von React-Router v4 erstellt ihren eigenen Verlauf, wird nicht offengelegt und kann von uns nicht referenziert werden. Peinlich~

Wir können den empfohlenen BrowserRouter nicht verwenden und trotzdem die Router-Komponente verwenden. Wir erschaffen die Geschichte selbst, und andere Orte nennen die Geschichte, die wir geschaffen haben. Schauen Sie sich den Code an~

Wir erstellen selbst einen Verlauf

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

Wir verwenden die Router-Komponente

// 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;),
);

Wir können sie anderswo so verwenden

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

4. Ich bestehe auf der Verwendung von BrowserRouter

Tatsächlich empfiehlt React-Router v4 die Verwendung der BrowserRouter-Komponente, aber in der dritten Lösung haben wir diese Komponente aufgegeben und sind auf die Verwendung der Router-Komponente zurückgegriffen.

Was zu tun ist. Wenn Sie einen Blick auf den Quellcode von BrowserRouter werfen, werden Sie es meiner Meinung nach plötzlich verstehen.

Der Quellcode ist sehr einfach, es gibt nicht viel. Wir schreiben eine BrowserRouter-Komponente vollständig selbst und ersetzen dann die Router-Komponente in der dritten Lösung. hey-hey.

Dies endet hier. Ich verwende derzeit die dritte Methode. Obwohl die erste Methode offiziell empfohlen wird, ist sie meiner Meinung nach umständlicher. ~

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Implementierung des MVVM-Frameworks in js (ausführliches Tutorial)

Wie implementiert requireJS einen Modullader?

JSsearch imitiert Taobao (ausführliches Tutorial)

Was sind die Unterschiede zwischen On und Click in JQuery?

Welche Methoden der Stilbindung gibt es in Angular 2+?

Das obige ist der detaillierte Inhalt vonSo verwenden Sie den Verlauf zur Steuerung des Routings im React-Router (ausführliches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!