Die Haken des React -Routers

React Router V5 führt einen leistungsstarken Hakenmechanismus ein, der vier bequeme Routing -Haken bietet und das Routing -Management vereinfacht. Dieser Artikel beginnt schnell mit dem neuen Modus React Router V5, der zuerst den neuen Routing -Rendering -Modus einführt und dann die Verwendung jedes Hakens einleitet.

Reagieren Sie Router vor V5

 // Rendern Sie die Route und erhalten Sie die Routenattribute<route component="{Home}" path="/"></route>

// zusätzliche Eigenschaften bestehen<route path="/" render="{({" match><profile match="{match}" mine="{true}"></profile> } /></route>

Bei Verwendung component werden Routingeigenschaften ( match , location und history ) implizit an die Komponente übergeben. Wenn Sie jedoch zusätzliche Immobilien verabschieden müssen, müssen Sie stattdessen render -Eigenschaft verwenden. Es ist zu beachten, dass das Hinzufügen von Inline -Funktionen zur component dazu führt, dass die Komponente jedes Mal wiederhergestellt wird, wenn sie gerendert wird.

Reagieren Sie Router nach V5

<route path="/"><home></home></route>

Home empfängt nicht mehr implizit Routingeigenschaften. Sie können Home jedoch zusätzliche Eigenschaften hinzufügen, ohne Route selbst zu ändern. Vermeiden Sie das Problem, Komponenten bei jedem Rendern zu rechnen, was eine prägnantere und effizientere API -Design ist.

Wie können Sie auf match , history oder location zugreifen, da Routing -Eigenschaften nicht mehr implizit übergeben werden? Muss ich alle Komponenten mit withRouter einwickeln? Hier kommt der Haken ins Spiel.

Beachten Sie, dass der Haken in React 16.8 eingeführt wurde, sodass React verwendet werden muss.

useHistory -Haken

• Bietet Zugriff auf history im React -Router.
• Zeigt auf history Abhängigkeiten des Verlaufspakets, die von der Route verwendet werden.
• Es wird hauptsächlich für das programmatische Routing durch Funktionen wie push , replace usw. verwendet.

 Import {UseHistory} aus 'React-Router-Dom';

Funktion home () {
  const history = useHistory ();
  return <button onclick="{()">history.push ('/profil')}> profil</button> ;
}

useLocation Hook

• Bietet Zugriff auf location Standortattribut im React -Router.
• Ähnlich wie das window.location des Browsers.location, aber es repräsentiert den Routing -Status und den Ort und kann überall zugegriffen werden.
• Hauptsächlich zum Zugriff auf Abfragsparameter oder zum vollständigen Routing -Zeichenfolgen.

 Import {uselocation} aus 'React-Router-Dom';

Funktion profile () {
  const location = uselocation ();
  useEffect (() => {
    const CurrentPath = Ort.PathName;
    const searchParams = new urlSearchParams (Ort.Search);
    // ... verwenden
  }, [Standort]);
  Zurückkehren<p> Profil</p> ;
}

Da location Standorteigenschaft unveränderlich ist, ruft die useEffect der Funktion die Funktion jedes Mal auf, wenn sich die Route ändert, was sich hervorragend zum Manipulieren von Suchparametern oder aktuellen Pfaden eignet.

useParams Hook

• Bietet Zugriff auf Parameter in der URL.
• Diese Funktion wurde zuvor nur über match.params implementiert.

 Import {useParams, Route} aus 'React-Router-Dom';

Funktion profile () {
  const {name} = useParams ();
  Zurückkehren<p> {Name }'s Profil</p> ;
}

Funktion Dashboard () {
  Zurückkehren (
    <div>
      <nav>
        <link to="{`/profile/ann`}">Anns Profil
      </nav>
      <main>
        <route path="/profile/:name"><profile></profile></route>
      </main>
    </div>
  );
}

useRouteMatch Hook

• Bietet Zugriff auf match Objekte.
• Wenn es kein Argument gibt, wird die engste Übereinstimmung in der Komponente oder der übergeordneten Komponente zurückgegeben.
• Hauptsächlich zum Bau verschachtelter Pfade.

 Import {userOutematch, Route} aus 'React-Router-Dom';

Funktion auth () {
  const match = userOutematch ();
  Zurückkehren (
    <div>
      <route path="{`${match.url}/login`}"><login></login></route>
      <route path="{`${match.url}/register`}"><register></register></route>
    </div>
  );
}

useRouteMatch kann auch verwendet werden, um über match -Objekte zuzugreifen, ohne Route durch Übergabe von location zu rendern.

Angenommen, Sie müssen Ihr Profil in /profile rendern und wenn die URL den Namen der Person ( /profile/dan oder /profile/ann ) enthält, rendern Sie das Profil anderer. Wenn Sie keinen Haken verwenden, müssen Sie einen Switch schreiben, zwei Routen auflisten und mit Requisiten anpassen. Aber jetzt kann die Verwendung von Hook dies tun:

 Importieren {Route, BrowSerritter als Router, Link, UserOutematch} aus 'React-Router-Dom';

Funktion profile () {
  const match = userOutematch ('/profile/: name');
  Revanche?<p> {match.params.name} 'Profil</p> :<p> Mein eigenes Profil</p> ;
}

Exportieren Sie Standardfunktionsfunktion app () {
  Zurückkehren (
    <router>
      <nav>
        <link to="/profile">Mein Profil
        <br>
        <link to="{`/profile/ann`}">Anns Profil
      </nav>
      <route path="/profile"><profile></profile></route>
    </router>
  );
}

Sie können auch alle Route wie exact oder sensitive als Objekte an useRouteMatch übergeben.

Zusammenfassen

Haken und explizite Route selbst haben versteckte Vorteile. Diese Haken vermeiden einen Großteil der Verwirrung und Komplexität, die in frühen Modi entstanden sind, menschliche Fehler reduzieren, den Routing -Code leichter aufrechterhalten und leichter auf die neue React -Router -Version auf dem neuesten Stand zu bringen.

Das obige ist der detaillierte Inhalt vonDie Haken des React -Routers. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!