Übertragung von Routing-Parametern für die Kommunikation von React-Komponenten (react-router-dom)

Ich habe vor Kurzem React gelernt und verwende jetzt Vue bei der Arbeit. Während des Lernprozesses habe ich die beiden verglichen, um mein Verständnis zu vertiefen.

Das Folgende ist ein kleiner Teil der Wissenspunkte in React, die meiner persönlichen Meinung nach auch relativ allgemeine Wissenspunkte sind. Eine der Möglichkeiten für die Kommunikation von React-Komponenten ist die Übertragung von Routing-Parametern (es gibt viele Möglichkeiten für die Kommunikation von React-Komponenten, z. B. Requisiten, Ereignisrückrufe, Kontext, Router, Redux, Cache usw.). Derzeit wird Single-Page-SPA häufig verwendet. Um zu einigen Seiten zu springen, ohne die gesamte Seite zu aktualisieren, ist es unvermeidlich, Routing-Jump zu verwenden. Neben dem Springen zwischen Seiten verfügt React Routing auch über eine großartige Funktion zum Übergeben von Parametern beim Wechseln von Seiten oder Komponenten, um den Kommunikationszweck zu erreichen.

Lassen Sie uns anhand eines einfachen Beispiels veranschaulichen, wie das React-Routing springt und Parameter übergibt (in diesem Artikel liegt der Schwerpunkt auf der Übergabemethode für Routing-Parameter. Auf die Routing-Konfiguration und zugehörige Attribute wird vorerst nicht eingegangen).

Vorbereitung, Routing-Abhängigkeiten installieren:

npm install -S react-router-dom

Fügen Sie dann die Route in die Seite ein:

Home aus „./component/ManageSystem“ importieren;
importiere { BrowserRouter als Router } von 'react-router-dom'
Funktion App() {
  zurückkehren (
    <Router> //Routenpaket, eine oder mehrere Seiten auf der Homepage erfordern möglicherweise eine Routenumschaltung <div id="App">
        <Startseite />
      </div>
    </Router>
  );
}
 
Standard-App exportieren

Ein Teil von ManageSystem.js muss den Anzeigeinhalt per Routing umschalten. Route ist die Komponente, die umgeschaltet werden muss, path ist der Routing-Pfad, exact ist die exakte Übereinstimmung, Link ist der Link, to stellt den Routing-Pfad des Sprungs dar, der dem Pfad in Route entspricht, und Redirect ist die Umleitung.

importiere React von „react“;
importiere Loadable aus '../utils/loadable'
importiere {Route,Link,withRouter,Redirect,Switch} aus „react-router-dom“;
importiere { Button } von „element-react“;
//Komponenten dynamisch laden, um das Rendern des ersten Bildschirms zu beschleunigen const About = Loadable(() => import('./About.js'))
const Benutzer = Ladebar(() => import('./Users.js'))
Klasse Home erweitert React.Component {
    rendern() {
	    zurückkehren (
		<div Stil={{ Position: 'relative' }}>
		    <nav style={{ position: 'absolut', oben: '0', links: '60%' }}>
				<ul>
				    <li Stil={{ marginBottom: '10px' }}>
				        <Link to={{pathname:"/home/about",query:{ text: '666' }}}>Über</Link>
				    </li>
			        <li>
			            <Link to={{pathname:"/home/users/999",state:{ text: '888' }}}>Benutzer</Link>
					</li>
				</ul>
			</nav>
			<div Stil={{ Position: 'absolut', oben: '20px', rechts: '20px' }}>
			    <Schalter>
				    <Route exakter Pfad="/home" component={() => { return null }}>
				    </Route>
				    <Routengenauer Pfad="/home/about" component={About}>
				    </Route>
				    <Route exakter Pfad="/home/users/:id" component={Benutzer}>
				    </Route>
				    <Genaue Weiterleitung von="/" nach='/home' />
			    </Schalter>
			</div>
		</div>
		);
	}
}
/*
Der withRouter in der High-Level-Komponente wird verwendet, um eine Komponente in die Route einzubinden.
Dann werden die drei Objekte „React-Router“ (History), „Location“ und „Match“ in das Props-Attribut dieser Komponente eingefügt.
*/
Standardmäßig mit Router (Home) exportieren

Jetzt kommt der Punkt! ! !

Beim Routenwechsel gibt es drei Hauptmethoden zum Übergeben von Parametern: Pfad, dynamischer Pfad, Abfrage und Status

Erstens die dynamische Pfadmethode . Beim Festlegen des Pfads wird der Adresse ein dynamischer Parameter hinzugefügt. Die folgenden dynamischen Parameter sind: id

<Route exakter Pfad="/home/users/:id" component={Benutzer}>
</Route>

Beim Seitenwechsel bzw. Seitensprung setzen Sie die zu übermittelnden Informationen nach der Adresse, beispielsweise:

<Link to={{pathname:"/home/users/999"}}>Benutzer</Link>

Wenn Sie zu Benutzern wechseln, können Sie match verwenden, um die von Benutzern übergebenen Informationen abzurufen. Users.js lautet wie folgt

importiere React von „react“;
Klasse Benutzer erweitert React.Component {
  Konstruktor(Requisiten) {
    super(Requisiten)
    dieser.Zustand = {
      id: this.props.match.params.id //Holen Sie sich hier die Informationen, die durch das dynamische Parameter-Spleißen des Pfads übergeben wurden}
  }
  KomponenteDidMount(){
    console.log(diese.Eigenschaften,'Benutzereigenschaften')
  }
  rendern() {
    zurückkehren (
      <div>
        <span>Ich bin Benutzer: {this.state.id}</span>
      </div>
    )
  }
}
Standardbenutzer exportieren

Holen Sie sich: this.props.match.params.id

Sie können Requisiten ausdrucken und den Inhalt überprüfen. Es ist nicht schwer herauszufinden, ob die Informationen in Requisiten vorhanden sind

Der entsprechende programmatische Sprung lautet dann:

<button onClick={() => { this.props.history.push({ pathname: '/home/users/999' }) }}>über</button>
 
//Verwenden Sie in ähnlicher Weise this.props.match.params.id, um den Wert abzurufen

Die zweite Methode zur Parameterübergabe ist query , die Informationen über den Abfrageparameter übergibt.

<Link to={{pathname:"/home/users",query:{ text: '666' }}}>Benutzer</Link>

Holen Sie sich: this.props.location.query.text

Drucken Sie es aus und sehen Sie

Der entsprechende programmatische Sprung lautet:

<button onClick={() => { this.props.history.push({ pathname: '/home/users/999', query: { text: '666' } }) }}>Benutzer</button>
 
//In ähnlicher Weise erhalten Sie die Methode this.props.location.query.text

Die dritte Methode zur Parameterübergabe ist state , die Informationen über den Parameter state übergibt. Die Verwendung ist dieselbe wie bei query .

<Link to={{pathname:"/home/users",state:{ text: '666' }}}>Benutzer</Link>

Holen Sie sich: this.props.location.state.text

Drucken Sie es aus und sehen Sie

Der entsprechende programmatische Sprung lautet:

<button onClick={() => { this.props.history.push({ pathname: '/home/users/999', state: { text: '666' } }) }}>Benutzer</button>
 
//In ähnlicher Weise erhalten Sie die Methode this.props.location.state.text

PS: Es gibt einen wichtigen Unterschied zwischen Abfrage und Status. Wenn nach dem Seitensprung die aktuelle Seite aktualisiert wird, verschwindet die Abfrage, der Status verschwindet jedoch nicht. Das heißt, er bleibt weiterhin am Speicherort gespeichert.

Lassen Sie uns das testen und die Seite Users.js ändern. Wenn die Abfrage nicht existiert, wird „Abfrage ist verschwunden“ angezeigt.

importiere React von „react“;
Klasse Benutzer erweitert React.Component {
  Konstruktor(Requisiten) {
    super(Requisiten)
    dieser.Zustand = {
      Text: this.props.location.query ? this.props.location.query.text : ‚Abfrage ist verschwunden‘
    }
  }
  KomponenteDidMount(){
    console.log(diese.Eigenschaften,'Benutzereigenschaften')
  }
  rendern() {
    zurückkehren (
      <div>
        <span>Ich bin Benutzer: {this.state.text}</span>
      </div>
    )
  }
}
Standardbenutzer exportieren

Durch Springen werden die Daten normal abgerufen und die Abfrage existiert

Aktualisieren Sie die aktuelle Seite und die Abfrage verschwindet

Die Seite zeigt

Derselbe Prozess verwendet die Methode zur Übergabe des Parameters „state“. Der Status am Standort verschwindet nicht, wenn die aktuelle Seite aktualisiert wird. Die Methode „state“ wird empfohlen.

Zusammenfassung: Dieser Artikel beschreibt hauptsächlich drei Möglichkeiten zum Übergeben von Parametern in React-Routing-Sprüngen. Wenn ein Seitensprung in einem Projekt das Übergeben bestimmter Informationen an die Sprungzielseite erfordert, können Sie diese Methoden in Betracht ziehen. Unterschied: Obwohl die dynamische Adressmethode einfach ist, ist die Parameterübergabemethode einfach und kann nur in der Adresse geschrieben werden, und es handelt sich um eine Zeichenfolge. Wenn die übertragenen Informationen zu lang sind, sieht die Adresse unordentlich aus und die Informationen werden offengelegt. Bei der Abfrage ist die Parameterübergabemethode zwar dieselbe wie die Statusmethode, aber es gibt eine Sache: Nach dem Springen und Aktualisieren der aktuellen Seite verschwindet die Abfrage, der Status jedoch nicht.

Vergleichen Sie die Routing-Parameter-Übergabemethode in Vue:

Kommunikationsmethoden zwischen Vue-Komponenten (mehrere Szenarien, leicht verständlich, für die Sammlung empfohlen)

Dies ist das Ende dieses Artikels über React-Komponentenkommunikation – Routing-Parameterübergabe (react-router-dom). Weitere relevante Inhalte zur React-Routing-Parameterübergabe finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!