Einfache und schnelle Einführung in die React-Routing-Entwicklung

Installieren

Geben Sie zur Installation den folgenden Befehl ein:

// npm
npm installiere react-router-dom

//Garn
Garn fügt React-Router-Dom hinzu

React-Router-bezogene Tags

Es gibt acht häufig verwendete Komponenten von react-router :

importieren { 
  BrowserRouter,
  HashRouter,
  Route,
  Umleiten,
  Schalten,
  Link,
  NavLink,
  mitRouter,
} von „react-router-dom“

Einfacher Routensprung

Implementieren Sie einen einfachen Routing-Sprung der ersten Ebene

importieren { 
    BrowserRouter als Router, 
    Route, 
    Link 
} von „react-router-dom“
Home aus './home' importieren
Importieren Sie Info aus „./about“.

Funktion App() {
  zurückkehren (
    <div Klassenname="App">
      <Router>
        <Link to="/home" className="link">Zur Startseite springen</Link>
        <Link to="/about" className="link">Zur Info-Seite springen</Link>
        <Routenpfad="/home" Komponente={Home}/>
        <Routenpfad="/about" component={Über}/>
      </Router>
    </div>
  );
}

Standard-App exportieren;

Die Wirkung ist wie folgt:

Bild

Zusammenfassung der wichtigsten Punkte:

Route Komponente muss sich innerhalb Router Komponente befinden
Der Wert des to Attributs Link Komponente ist der Pfad, zu dem nach dem Klicken gesprungen wird.
path Pfadattribut Route stimmt to Attribut Link Tags überein; component Komponentenattribut stellt das Komponentenobjekt dar, das gerendert wird, nachdem Route erfolgreich übereinstimmt.

Verschachtelter Routensprung

Das Routing-Matching-Level von React ist in Ordnung

Beispielsweise werden in der App Komponente zwei passende Pfade der Routing-Komponenten gesetzt, nämlich /home und /about . Der Code lautet wie folgt:

importieren { 
  BrowserRouter als Router, 
  Route, 
  Link,
} von „react-router-dom“
Home aus './home' importieren
Importieren Sie Info aus „./about“.

Funktion App() {

  zurückkehren (
    <div Klassenname="App">
      <Router>
        <Link to="/home">Zur Startseite</Link>
        <Link to="/about">Zur Infoseite</Link>

        <Routenpfad="/home" Komponente={Home}/>
        <Routenpfad="/about" component={Über}/>                           

      </Router>
    </div>
  );
}

Standard-App exportieren;

Anschließend möchten wir in der Home Komponente auch die passenden Pfade zweier Routing-Komponenten festlegen, nämlich /home/one und /home/two . An diesem Punkt können wir sehen, dass /home/one und /home/two die verschachtelten Routen der zweiten Ebene der Route /home der oberen Ebene sind. Der Code lautet wie folgt:

React von „react“ importieren
importieren {
    Route,
    Link,
} von „react-router-dom“
importiere One aus './one'
importiere Zwei aus './two'

Funktion Home () {
    
    zurückkehren (
        <>
            Ich bin die Startseite <Link to="/home/one">Zur Startseite/einer Seite springen</Link>
            <Link to="/home/two">Zur Home/Two-Seite gehen</Link>

            <Routenpfad="/home/one" Komponente={One}/>
            <Routenpfad="/home/zwei" Komponente={Zwei}/>
        </>
    )
}

Standard-Startseite exportieren

Besonderer Hinweis: Der sekundäre Routenpfad, der der Routing-Komponente One in der Home Komponente entspricht, muss als /home/one und nicht als /one geschrieben werden. Denken Sie nicht, dass One Komponente als /one abgekürzt werden kann, nur weil sie sich scheinbar in der Home Komponente befindet.

Dynamische Verknüpfung

NavLink kann dem Link, der sich aktuell im active Status befindet, einen active Klassennamen zuordnen, zum Beispiel:

importieren { 
    BrowserRouter als Router, 
    Route, 
    NavLink 
} von „react-router-dom“
Home aus './home' importieren
Importieren Sie Info aus „./about“.

Funktion App() {
  zurückkehren (
    <div Klassenname="App">
      <Router>
        <NavLink to="/home" className="link">Zur Startseite springen</NavLink>
        <NavLink to="/about" className="link">Zur Info-Seite springen</NavLink>
        <Routenpfad="/home" Komponente={Home}/>
        <Routenpfad="/about" component={Über}/>
      </Router>
    </div>
  );
}

Standard-App exportieren;
/* Den Stil der aktiven Klasse festlegen */
.aktiv {
    Schriftstärke: schwarz;
    Farbe: rot;
}

Die Wirkung ist wie folgt:

Bild

Routenanpassungsoptimierung

Wenn Sie auf den Umleitungslink klicken, wird automatisch versucht, alle Route entsprechenden Pfade abzugleichen, wie in der Abbildung gezeigt:

Bild

Unter normalen Umständen müssen Sie nur eine Regel abgleichen und rendern. Das heißt, nach einer erfolgreichen Übereinstimmung müssen keine weiteren Übereinstimmungsversuche unternommen werden. In diesem Fall können Sie Switch Komponente verwenden, wie unten gezeigt:

importieren { 
  BrowserRouter als Router, 
  Route, 
  NavLink,
  Schalten,
} von „react-router-dom“
Home aus './home' importieren
Importieren Sie Info aus „./about“.

Funktion App() {
  zurückkehren (
    <div Klassenname="App">
      <Router>
        <NavLink to="/home" className="link">Zur Startseite springen</NavLink>   
        <NavLink to="/about" className="link">Zur Info-Seite springen</NavLink>

        <Schalter>
          <Routenpfad="/home" Komponente={Home}/>       
          <Routenpfad="/about" component={Über}/>      
          <Routenpfad="/home" Komponente={Home}/>       
          <Routenpfad="/home" Komponente={Home}/>        
          {/* Zehntausend Routenkomponenten werden hier weggelassen*/}                  
          <Routenpfad="/home" Komponente={Home}/>                           
        </Schalter>

      </Router>
    </div>
  );
}

Standard-App exportieren;

Die Wirkung ist wie folgt:

Bild

Zusammenfassung der wichtigsten Punkte:

Durch Platzieren mehrerer Route in einer Switch Komponente können mehrere sinnlose Routenübereinstimmungen vermieden und die Leistung verbessert werden.

Umleiten

Wenn beim Seitensprung der Sprunglink mit keiner Route Komponente übereinstimmt, wird die 404 Seite angezeigt. Daher benötigen wir eine Umleitungskomponente namens Redirect . Der Code lautet wie folgt:

importieren { 
  BrowserRouter als Router, 
  Route, 
  NavLink,
  Schalten,
  Umleiten,
} von „react-router-dom“
Home aus './home' importieren
Importieren Sie Info aus „./about“.

Funktion App() {
  zurückkehren (
    <div Klassenname="App">
      <Router>
        <NavLink to="/home" className="link">Zur Startseite springen</NavLink>   
        <NavLink to="/about" className="link">Zur Info-Seite springen</NavLink>
        <NavLink to="/shop" className="link">Zur Shop-Seite springen</NavLink> {/* Klicken Sie, um zu /shop zu springen, aber der Pfad ist nicht festgelegt*/}

        <Schalter>
          <Routenpfad="/home" Komponente={Home}/>       
          <Routenpfad="/about" component={Über}/>      
          <Redirect to="/home" /> {/* Wenn alle oben genannten Routenkomponenten nicht übereinstimmen, leiten Sie zu /home weiter */}                    
        </Schalter>

      </Router>
    </div>
  );
}

Standard-App exportieren;

Die Wirkung ist wie folgt:

Bild

Routing-Parameter

Alle von der Route übergebenen Parameter werden in props der Sprungroutenkomponente abgerufen. Jede Parameterübergabemethode empfängt die Parameter auf eine etwas andere Weise.

Es gibt drei Möglichkeiten, Parameter per Routing zu übergeben. Sehen wir sie uns der Reihe nach an.

Der erste

Die erste besteht darin, Parameter auf dem Sprungpfad Link Komponente zu übertragen und Parameter über den Parameternamen auf dem passenden Pfad Route Komponente zu empfangen :參數名Der Code lautet wie folgt:

importieren { 
  BrowserRouter als Router, 
  Route, 
  NavLink,
  Schalten,
} von „react-router-dom“
Home aus './home' importieren
Importieren Sie Info aus „./about“.

Funktion App() {
  zurückkehren (
    <div Klassenname="App">
      <Router>
        {/* Der Pfad /home enthält zwei Parameter, Zhang San und 18*/}
        <NavLink to="/home/张三/18" className="link">Zur Startseite springen</NavLink>   
        <NavLink to="/about" className="link">Zur Info-Seite springen</NavLink>

        <Schalter>
          {/* Empfängt die Parameter Name und Alter an derselben Stelle im passenden Pfad /home*/}
          <Routenpfad="/home/:name/:age" Komponente={Home}/>       
          <Routenpfad="/about" component={Über}/>                           
        </Schalter>

      </Router>
    </div>
  );
}

Standard-App exportieren;

Versuchen Sie, props der Routing-Komponente zu überspringen und zu drucken

Bild

Wie Sie sehen, werden die Parameter der ersten Methode über props.match.params abgerufen.

Der Zweite

Die zweite Möglichkeit besteht darin, Parameter zu übergeben, die mit ? beginnen, nach dem Sprunglink Link Komponente, beispielsweise ?a=1&b=3 Der Code lautet wie folgt:

importieren { 
  BrowserRouter als Router, 
  Route, 
  NavLink,
  Schalten,
} von „react-router-dom“
Home aus './home' importieren
Importieren Sie Info aus „./about“.

Funktion App() {
  zurückkehren (
    <div Klassenname="App">
      <Router>
        {/* Übergeben Sie nach dem Sprungpfad zwei Parameter, die mit einem Fragezeichen beginnen, nämlich name=张三, age=18 */}
        <NavLink to="/home?name=张三&age=18" className="link">Zur Startseite springen</NavLink>   
        <NavLink to="/about" className="link">Zur Info-Seite springen</NavLink>

        <Schalter>
          {/* Hier ist kein Empfangsvorgang erforderlich*/}
          <Routenpfad="/home" Komponente={Home}/>       
          <Routenpfad="/about" component={Über}/>                           
        </Schalter>

      </Router>
    </div>
  );
}

Standard-App exportieren;

Versuchen Sie, props der Routing-Komponente zu überspringen und zu drucken

Bild

Wie Sie sehen, werden die Parameter der zweiten Methode über props.location.search abgerufen, aber die Parameter hier müssen Sie selbst weiter konvertieren, daher werde ich dies hier nicht im Detail erläutern.

Der dritte

Die dritte Möglichkeit besteht darin, die to jump-Eigenschaft Link Komponente in Form eines Objekts zu schreiben und die Parameter über state Eigenschaft zu übergeben. Der Code lautet wie folgt:

importieren { 
  BrowserRouter als Router, 
  Route, 
  NavLink,
  Schalten,
} von „react-router-dom“
Home aus './home' importieren
Importieren Sie Info aus „./about“.

Funktion App() {
  zurückkehren (
    <div Klassenname="App">
      <Router>
        {/* Beschreibe das „to“-Attribut in Form eines Objekts. Das Pfadattribut heißt „pathname“ und das Parameterattribut „state“ */}
        <NavLink to={{pathname: "/home", state: {name: '张三', age: 18}}} className="link">Zur Startseite springen</NavLink>   
        <NavLink to="/about" className="link">Zur Info-Seite springen</NavLink>

        <Schalter>
          {/* Es ist nicht nötig, hier speziell Attribute zu empfangen*/}
          <Routenpfad="/home" Komponente={Home}/>       
          <Routenpfad="/about" component={Über}/>                           
        </Schalter>

      </Router>
    </div>
  );
}

Standard-App exportieren;

Versuchen Sie, props der Routing-Komponente zu überspringen und zu drucken

Bild

Wie Sie sehen, werden die Parameter der dritten Methode über props.location.state abgerufen.

Funktionales Routing

Das Obige springt hauptsächlich über Link -Komponente in react-router-dom zu einer bestimmten Routing-Komponente

Manchmal benötigen wir jedoch eine flexiblere Möglichkeit zum Routenspringen, z. B. das Aufrufen einer Funktion zum Routenspringen jederzeit und überall. Dies wird als funktionales Routing bezeichnet.

Beim funktionalen Routing werden 5 Methoden verwendet (der Screenshot unten stammt von props der Routing-Komponente).

Bildbeschreibung hier einfügen

5 Methoden sind push , replace , goForward , goBack und go . Als Nächstes stellen wir diese Methoden der Reihe nach vor.

drücken

Die push -Methode besteht darin, auf der Seite zum entsprechenden Pfad zu springen und einen Datensatz im Browser zu hinterlassen (dh Sie können über die Zurück-Schaltfläche des Browsers zur vorherigen Seite zurückkehren).

Legen Sie beispielsweise in der Routing-Komponente Home eine button fest, klicken Sie darauf und rufen Sie die push -Methode auf, um zur Seite „ /about “ zu springen.

React von „react“ importieren

Funktion Home (Requisiten) {

    let pushLink = () => {
        props.history.push('/über')
    }
    
    zurückkehren (
        <div Klassenname="a">
            Ich bin auf der Startseite <button onClick={pushLink}> Zur Infoseite springen </button>
        </div>
    )
}

Standard-Startseite exportieren

Der Sprungeffekt ist wie folgt:

Bild

Wie Sie sehen, können Sie nach dem Springen durch die push -Methode über die Zurück-Schaltfläche des Browsers zur vorherigen Seite zurückkehren.

ersetzen

replace ähnelt der push -Methode, außer dass der Datensatz der vorherigen Seite nach dem Sprung nicht im Browser gespeichert wird (dh Sie können nicht über die Zurück-Schaltfläche des Browsers zur vorherigen Seite zurückkehren).

Ändern des Codes

React von „react“ importieren

Funktion Home (Requisiten) {

    let replaceLink = () => {
        props.history.replace('/über')
    }
    
    zurückkehren (
        <div Klassenname="a">
            Ich bin auf der Startseite <button onClick={replaceLink}> Zur Infoseite springen </button>
        </div>
    )
}

Standard-Startseite exportieren

Der Sprungeffekt ist wie folgt:

Bild

Wie Sie sehen, ist der anfängliche Pfad „/“, dann springt er zu „/home“ und klickt anschließend auf die Schaltfläche, um über die replace zur Seite /about zu springen. Schließlich kehrte ich über die Zurück-Schaltfläche des Browsers zur / -Seite zurück, was darauf hinweist, dass /home in der Mitte nicht im Datensatz des Browsers gespeichert war.

weiter

Der Aufruf der Methode goForward entspricht dem Klicken auf die Schaltfläche „Zurück zur nächsten Seite“ des Browsers, wie in der folgenden Abbildung dargestellt:

Bild

Ich werde hier keine weiteren Demonstrationen durchführen.

geh zurück

Der Aufruf der Methode goBack entspricht dem Klicken auf die Schaltfläche im Browser, um zur vorherigen Seite zurückzukehren, wie in der folgenden Abbildung dargestellt:

Bildbeschreibung hier einfügen

gehen

Wie der Name schon sagt, wird die go Methode verwendet, um zum angegebenen Pfad zu springen.

Diese Methode akzeptiert einen Parameter (Parametertyp ist Number ) wie folgt:

Wenn der Parameter eine positive Zahl n ist, bedeutet dies, dass zu den nächsten n Seiten gesprungen wird. Beispielsweise ist go(1) gleichbedeutend mit dem einmaligen Aufruf der Methode goForward .
Wenn der Parameter eine negative Zahl n ist, bedeutet dies, dass zu den vorherigen n Seiten gesprungen wird. Beispielsweise entspricht go(-3) dem dreimaligen Aufruf goBack .
Wenn der Parameter 0 ist, bedeutet dies, dass die aktuelle Seite aktualisiert wird

Gemeinsame Komponenten verwenden Routing

Hier gibt es zwei Konzepte: normale Komponenten und Routing-Komponenten

Die von Route -Komponente gerenderten Komponenten sind Routing-Komponenten, der Rest sind grundsätzlich normale Komponenten

Beispielsweise im folgenden Code: Home Komponente ist eine Routing-Komponente; App Komponente ist eine normale Komponente

importieren {
  BrowserRouter als Router, 
  Route, 
  NavLink,
  Schalten,
} von „react-router-dom“
Home aus './home' importieren

exportiere Standardfunktion App() {
  
  zurückkehren (
    <div Klassenname="App">
      <Router>
        <NavLink to='/home' className="link">Zur Startseite springen</NavLink>   

        <Schalter>
          <Routenpfad="/home" Komponente={Home}/>                              
        </Schalter>

      </Router>
    </div>
  );
}

Der größte Unterschied zwischen Routing-Komponenten und normalen Komponenten besteht darin, ob props Attribut der Komponente den in der folgenden Abbildung gezeigten Inhalt hat: (Ersteres hat, letzteres nicht)

Bild

An diesem Punkt stellt react-router-dom eine withRouter -Methode bereit, die es normalen Komponenten ermöglicht, dieselben Methoden oder Daten wie Routing-Komponenten zu haben.

So verwenden Sie es:

importieren { 
  BrowserRouter als Router, 
  Route, 
  NavLink,
  Schalten,
  withRouter, // 1. Einführung von witRouter
} von „react-router-dom“
Importieren Sie Info aus „./about“.

Funktion App(Requisiten) {

  console.log(props); // 3. Versuchen Sie, die Requisiten der normalen Komponenten-App zu drucken, und stellen Sie fest, dass die Requisiten bereits Inhalt enthalten, d. h. die normale Komponente kann auch dieselbe Funktion haben wie die Routing-Komponente return (
    <div Klassenname="App">
      <Router>
        <NavLink to="/about" className="link">Zur Info-Seite springen</NavLink>

        <Schalter>
          <Routenpfad="/about" component={Über}/>                           
        </Schalter>

      </Router>
    </div>
  );
}

export default withRouter(App); // 2. Verwenden Sie die Methode withRouter, um normale Komponenten zu umschließen

Auffüllen

ersetzen

Beim funktionalen Routing gibt es zwei Haupttypen von Sprüngen: push und replace . Beim nicht-funktionalen Routing können Sie den Sprungtyp auch anpassen. Der spezifische Implementierungscode lautet wie folgt:

importieren { 
    BrowserRouter als Router, 
    Route, 
    Link 
} von „react-router-dom“
Home aus './home' importieren
Importieren Sie Info aus „./about“.

Funktion App() {
  zurückkehren (
    <div Klassenname="App">
      <Router>
        <Link to="/home" className="link">Zur Startseite springen</Link>
        <Link to="/about" className="link">Zur Info-Seite springen</Link>

        <Route path="/home" component={Home} replace={true}/> {/* Ersetzen ist wahr, Sprungtyp ist Ersetzen */}
        <Route path="/about" component={About} replace={false}/> {/* Ersetzen ist falsch, Sprungtyp ist Push */}
      </Router>
    </div>
  );
}

Standard-App exportieren;
Die Route-Komponente verfügt über ein Ersetzungsattribut, mit dem der Umleitungstyp festgelegt werden kann. Wenn der Wert „true“ ist, lautet der Umleitungstyp „replace“; wenn er „false“ ist, lautet der Umleitungstyp „push“.

genau

Die Standardroutenübereinstimmung ist Fuzzy-Matching. Beispiel:

importieren { 
  BrowserRouter als Router, 
  Route, 
  Link,
} von „react-router-dom“
Home aus './home' importieren
Importieren Sie Info aus „./about“.

Funktion App() {

  zurückkehren (
    <div Klassenname="App">
      <Router>
        <Link to="/home/abc">Zur Startseite springen</Link> {/* Zu /home/abc springen, aber unter Home gibt es keine abc-Routingkomponente*/}
        <Link to="/about/abc">Zur Info-Seite springen</Link> {/* Zu /about/abc springen, aber unter „Home“ gibt es keine abc-Routing-Komponente*/}

        <Route path="/home" component={Home} /> {/* Die Routenübereinstimmungsregel ist /home, das genaue Attribut ist nicht festgelegt und die aktuelle Übereinstimmung ist unscharf*/}
        <Route path="/about" component={About} exact/> {/* Die Routenübereinstimmungsregel ist /about, das genaue Attribut ist festgelegt und die aktuelle Übereinstimmung ist exakt*/}

      </Router>
    </div>
  );
}

Standard-App exportieren;

Die Wirkung ist wie folgt:

Bild

Wie in der Abbildung zu sehen ist, ist beim Springen zu /home/abc die erste Route ein Fuzzy-Matching und stimmt deshalb zuerst mit /home überein, sodass Home Komponente gerendert wird. Beim Springen zu /about/abc ist die zweite Route eine exakte Übereinstimmung, d. h. /about/abc ist nicht gleich /about , sodass die About Komponente auch nicht gerendert wird.

Zusammenfassen:

Wenn Sie eine exakte Übereinstimmung wünschen, setzen Sie einfach exact Eigenschaft Route Komponente auf true .
Die exakte Übereinstimmung sollte mit Vorsicht verwendet werden, da sie die Verwendung verschachtelter Routen beeinträchtigen kann.

Oben finden Sie den detaillierten Inhalt des unkomplizierten Schnellstarts mit React Routing. Weitere Informationen zum Schnellstart mit React Routing finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!

Das könnte Sie auch interessieren:

So implementieren Sie die React-Routing-Authentifizierung
Mehrere Implementierungslösungen für das verzögerte Laden von React-Routen
Implementierung der React-Router4-Routenüberwachung
Detaillierte Erläuterung der Umleitungsmethoden jeder Version des React-Routings
Reacts Methode zur Steuerung der Anmeldeüberprüfung über das React-Router-Routing
React-Router v4: So verwenden Sie den Verlauf, um Routensprünge zu steuern
Lösung für das 404-Problem bei der direkten Eingabe des Routing-Pfads nach der Konfiguration der React-Projekt-URL in Nginx
Zusammenfassung der Routing-Konfigurationsmethode von React-Router v4

<<: Detaillierte Erläuterung der passwortfreien SSH-Anmeldekonfiguration unter Linux

>>: Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.20 unter Windows