Ich freue mich wirklich, Ihnen heute einige fortgeschrittene   vorstellen zu können. React Router ist ein erstaunliches Tool, mit dem wir eine dynamische und reibungslose Navigation in unseren   Anwendungen erstellen können. React Router-Techniken React-  Während es üblicherweise für grundlegende Routing-Anforderungen verwendet wird, gibt es einige weniger bekannte Techniken, die Ihre Routing-Fähigkeiten auf ein ganz neues Niveau heben können.  Heute teile ich einige meiner Favoriten, die ich im Laufe der Zeit entdeckt habe.  Wir behandeln:  Umgang mit der berüchtigten 404-Seite.  Erstellen einer aktiven Seitenanzeige, um die aktuelle Route hervorzuheben.  Verwendung der Hooks   und   . useNavigate useLocation  Wenn Sie diesen Artikel zu Ende gelesen haben, werden Sie diese fortgeschrittenen React Router-Techniken gut beherrschen und sich sicher fühlen, sie in Ihren eigenen Projekten anzuwenden.  Also lasst uns gleich loslegen und gemeinsam unsere Routing-Fähigkeiten verbessern!  Sind Sie bereit? Lass uns anfangen!  Umgang mit einer 404-Seite   Bei größeren Projekten ist es wichtig, sich um Routen zu kümmern, die nicht gefunden werden können. Wir bezeichnen diese Routen oft als   , da sie den   404 zurückgeben, wenn ein Dokument nicht auf dem Server gefunden wird. 404-Routen HTTP-Statuscode  Übrigens, wenn Sie ein Katzenliebhaber sind, könnte es Ihnen gefallen,   auszuprobieren. http.cat  Lassen Sie uns nun mit der Erstellung einer speziellen Route beginnen, die immer dann ausgelöst wird, wenn keine der anderen Routen mit der aktuellen URL im Browser übereinstimmt.   import {BrowserRouter, Routes, Route} from "react-router-dom"; function App() { return <BrowserRouter> <Routes> <Route path="/" element={<p>Landing page</p>}></Route> <Route path="/products" element={<p>Products page</p>}></Route> <Route path="*" element={<p>404 page</p>}></Route> </Routes> </BrowserRouter> }  Beim Zugriff auf die Primärseite   werden Benutzer zur Zielseite weitergeleitet. Wenn sie zur Seite   navigieren, werden sie zur Seite „Produkte“ weitergeleitet. Werden jedoch weitere Links aufgerufen, die keiner bestimmten Route entsprechen, wird die 404-Seite angezeigt. / /products  Der Grund für dieses Verhalten ist die Implementierung einer speziellen   für die 404-Seite, bei der die Pfadeigenschaft auf   festgelegt ist. Diese Konfiguration stellt sicher, dass React Router diese Route ausschließlich verwendet, wenn keine anderen Routen übereinstimmen können. Die spezifische Platzierung der 404-Route spielt keine Rolle und kann als integraler Bestandteil an einer beliebigen Stelle im Abschnitt   positioniert werden. <Route> * <Routes>...</Routes>  Aktive Seite  Eine weitere praktische Möglichkeit für Apps, Routen zu nutzen, besteht darin, die aktuell aktive Seite im Menü hervorzuheben.  Stellen Sie sich vor, Sie haben ein Navigationsmenü mit zwei Links:  Startseite – Dieser Link führt den Benutzer zur Hauptseite   . /  About – Dieser Link führt den Benutzer zur About-Seite   . /about  Mit React Router wird es möglich, den   Link automatisch hervorzuheben, wenn sich der Benutzer auf der   Route befindet. Ebenso können Sie den Home-Link markieren, wenn sich der Benutzer auf der   -Route befindet. Das Beste daran ist, dass Sie dies erreichen können, ohne dass komplexe Bedingungen erforderlich sind. About /about /  Hier ist eine einfache Möglichkeit, es zum Laufen zu bringen:   import {NavLink} from "react-router-dom"; function getClassName({isActive}) { if (isActive) { return "active"; // CSS class } } function App() { return <ul> <li> <NavLink to="/" className={getClassName}>Home</NavLink> </li> <li> <NavLink to="/about" className={getClassName}>About</NavLink> </li> </ul> }  Der Code, den Sie oben sehen, benötigt etwas CSS, damit die   Klasse funktioniert. Wir können es also verbessern, indem wir den Menülink der aktuell aktiven Seite fett und hervorstechen lassen. active   .active { font-weight: bold; }  Das   Attribut des   Elements bietet die Flexibilität, eine Funktion anstelle nur einer Zeichenfolge zu akzeptieren. Wenn Sie sich entscheiden, eine Funktion zu verwenden, wird ihr ein Objekt als Parameter zugewiesen, und für dieses Objekt ist die Eigenschaft   bereits festgelegt. Um innerhalb der Funktion einfach auf diese Eigenschaft zugreifen zu können, verwenden wir die Destrukturierung, indem wir   in den Parameter aufnehmen. className NavLink isActive {isActive}  Als Nächstes überprüfen wir, ob   einen wahrheitsgemäßen Wert enthält. Wenn das der Fall ist, geben wir den   Klassennamen   zurück. isActive CSS- active  Wenn der aktuelle Pfad in React Router mit dem   Attribut der   Komponente übereinstimmt, wird die Funktion   zu einem booleschen Wert ausgewertet. to NavLink isActive  Infolgedessen fügt React Router die   Klasse nahtlos in das entsprechende   Element ein und gibt sie als aktuell aktive Route an. active <NavLink />  Kürzere Version  Wenn Sie einen kürzeren Ansatz bevorzugen, können Sie den oben genannten Code mit dem ternären Operator umgestalten. Dieser Operator bietet eine Möglichkeit, eine if/else-Anweisung durch Verwendung des folgenden Formats zu ersetzen:   . condition ? truthy expression : falsy expression  Ich verwende den ternären Operator nicht wirklich oft, da er den Code oft weniger lesbar macht. In diesem Fall ist die Verwendung jedoch akzeptabel.  Betrachten Sie Folgendes als Beispiel:   function getClassName({isActive}) { if (isActive) { return "active"; } else { return ""; } }  Sie können den obigen Code durch den folgenden Ansatz ersetzen:   function getClassName({isActive}) { return isActive ? "active" : ""; }  Sie müssen lediglich sicherstellen, dass die Return-Anweisung außerhalb des ternären Operators platziert wird. Wenn die   Bedingung wahr ist, wird der Ausdruck nach   wird   ausgeführt. Andernfalls wird der Ausdruck nach     . isActive ? "active" : ""  Jetzt können wir die Notwendigkeit einer separaten Funktionsdefinition namens   beseitigen. Stattdessen können wir eine Pfeilfunktion wie diese verwenden:   . getClassName ({isActive}) => isActive ? "active" : ""  Wenn Ihnen diese Änderung zu schwer lesbar ist, können Sie wie bisher eine separate Funktion weiterverwenden.  Der endgültige Code würde so aussehen:   import {NavLink} from "react-router-dom"; function App() { return <ul> <li> <NavLink to="/" className={({isActive}) => isActive ? "active" : ""}>Home</NavLink> </li> <li> <NavLink to="/about" className={({isActive}) => isActive ? "active" : ""}>About</NavLink> </li> </ul> }  Oh Mann, ich kann deine Gedanken praktisch hören!  Sojin, du hast das DRY-Prinzip gebrochen, nicht wahr?  Dies ist nur ein Beispiel. Kein Grund, sich aufzuregen 😀  Die Wahl zwischen Link und NavLink: Was unterscheidet sie?  Sie haben vielleicht schon bemerkt, dass ich   anstelle unseres üblichen Freundes   verwende. Aber keine Sorge, lassen Sie mich erklären, warum. Sie sehen, die   Komponente erlaubt Ihnen nicht, eine Funktionsdefinition für die   Requisite zu verwenden. Ja, es mag überraschend sein, aber so ist es eben, wenn Sie mit   arbeiten. NavLink Link <Link /> className <Link />  Ein häufiger Fehler, den ich gesehen habe, ist, dass junge React-Entwickler versuchen, Funktionsdefinitionen in der   Requisite einer   Komponente zu verwenden, was einfach nicht funktioniert. className <Link />  Wenn Sie Interesse haben, kann ich einen Artikel zu diesem Thema schreiben. Lass es mich einfach in den Kommentaren wissen!   verwendenNavigieren  Unter bestimmten Umständen müssen Sie möglicherweise Seiten innerhalb Ihrer React-Anwendung programmgesteuert verschieben. Um den Besucher beispielsweise auf eine bestimmte Seite umzuleiten, können Sie eine Anfrage stellen und auf die Antwort warten.  Hier ein paar Beispiele:  Wenn der Benutzer nicht angemeldet ist, leiten Sie ihn zur Anmeldeseite weiter.  Nachdem die getLogin-Anfrage erfolgreich abgeschlossen wurde, leiten Sie den Benutzer zum   um. /dashboard  Dies erfordert die Verwendung des   -Hooks, der eine Funktion zurückgibt, mit der Sie den Benutzer programmgesteuert auf eine neue Route umleiten können. useNavigate()  Schau mal:   import React, {useEffect} from "react"; import {useNavigate} from "react-router-dom"; function HelpPage() { const navigate = useNavigate(); useEffect(() => { const isLoggedIn = window.localStorage.getItem("isLoggedIn"); if (!isLoggedIn) { navigate("/login"); } }, []); return <h2>Help page</h2>; }  Die Verwendung von BrowserRouter ist unerlässlich!  In diesem Beispiel prüfen wir, ob dem Schlüssel   für „localStorage“ ein Wert zugewiesen ist. Ist dies nicht der Fall, leiten wir den Benutzer mithilfe der Funktion   zur Seite   weiter. isLoggedIn navigate("/login") /login  Damit es funktioniert, denken Sie einfach daran, den   Hook innerhalb einer Komponente zu verwenden, die in der   Komponente verschachtelt ist. Andernfalls funktioniert es nicht richtig. useNavigate() <BrowserRouter />  Das folgende Beispiel funktioniert beispielsweise nicht:   import React from "react"; import {BrowserRouter, useNavigate} from "react-router-dom"; function App() { // ❌ This breaks because the component was not wrapped by BrowserRouter, but its children are. const history = useNavigate(); return <BrowserRouter> {/* ... */} </BrowserRouter>; }  Wenn Sie versuchen, den   Hook innerhalb der   Komponente zu verwenden, könnte es zu einem kleinen Schluckauf kommen. Das liegt daran, dass es nicht funktioniert, wenn Sie die   Komponente nicht mit   umschließen. useNavigate() App() App() <BrowserRouter />  Aber keine Sorge!  Die gute Nachricht ist, dass alle untergeordneten Komponenten in App automatisch von   umschlossen werden, sodass Sie   problemlos und ohne Probleme in diesen untergeordneten Komponenten verwenden können. <BrowserRouter /> useNavigate()  Wenn Sie jedoch   wirklich in der   Komponente selbst verwenden müssen, gibt es eine einfache Lösung. Sie müssen lediglich eine übergeordnete Komponente erstellen, die   umschließt, und sicherstellen, dass   innerhalb dieser übergeordneten Komponente verschoben wird. Sobald Sie das getan haben, können Sie   in der   Komponente nach Herzenslust verwenden 💗 useNavigate() <App /> <App /> <BrowserRouter /> useNavigate() <App />  Gewährleistung der Zugänglichkeit und ordnungsgemäßen Linknutzung  Wenn Sie Ihre Website barrierefrei gestalten möchten, ist es wichtig, auf die Struktur Ihrer Links zu achten. Um dies sicherzustellen, wird empfohlen,   Elemente anstelle anderer Methoden zu verwenden. <Link />  Warum?  Nun, diese Elemente werden automatisch als   -Tags gerendert, die für ihre   bekannt sind. <a> Barrierefreiheitsfunktionen  Hier ist ein freundlicher Tipp: Vermeiden Sie es, Ihre normalen   Elemente durch die von   bereitgestellte   Methode zu ersetzen. Diese Methode sollte nur in Fällen verwendet werden, in denen die Verwendung eines   Elements nicht möglich ist. <Link /> useNavigate() .push() <Link />  Wann passiert das?  Typischerweise ist dies der Fall, wenn Sie Benutzer programmgesteuert auf der Grundlage einer bestimmten Logik umleiten müssen, beispielsweise dem Ergebnis einer   Operation. fetch()   useLocation  Was wäre, wenn Sie jedes Mal einen Code ausführen möchten, wenn React Router Sie zu einer neuen Adresse führt?  Dies können Sie ganz einfach mit Hilfe des   Hooks erreichen. Aber bevor wir uns mit den Details befassen, wollen wir einige Szenarien untersuchen, in denen dies nützlich sein kann. Einer der häufigsten Anwendungsfälle ist das Senden eines   an Ihren Analysedienst wie Google Analytics. useLocation Seitenaufrufereignisses  Erwähnenswert ist jedoch, dass Google Analytics 4 dies jetzt automatisch erledigt, sodass Sie es nicht unbedingt selbst implementieren müssen.  Dennoch ist es immer noch wertvoll, etwas über den   Hook zu lernen, da Sie möglicherweise andere Verwendungszwecke dafür finden. Sie können es beispielsweise zur Integration mit anderen Bibliotheken und Analysediensten verwenden oder bestimmte Aktionen basierend auf den besuchten Routen ausführen. useLocation  Die Möglichkeiten sind endlos!  useLocation-Hook  Der   Hook ist sehr praktisch, da er Ihnen Informationen über die aktuell verwendete Route liefert. useLocation  Hier ist eine benutzerfreundliche Anleitung zur Verwendung des useLocation-Hooks:   import {BrowserRouter, Routes, Route, useLocation} from "react-router-dom"; import {createRoot} from "react-dom/client"; function App() { const location = useLocation(); console.log(location.pathname); return <Routes> {/* routes here... */} </Routes> } createRoot(document.querySelector("#react-root")).render(<BrowserRouter><App /></BrowserRouter>);  Jetzt können Sie über die Standortvariable auf die Routeninformationen zugreifen. Es ist ein Objekt, das den aktuellen   enthält. pathname  Um herauszufinden, welche Route der Benutzer gerade durchsucht, verwenden Sie einfach   . Sie erhalten so etwas wie   ,   oder jede andere Route, die Sie eingerichtet haben. location.pathname / /about  Denken Sie daran, dass es genau wie beim   Hook wichtig ist, dass Ihr Code in einer Komponente ausgeführt wird, die von   umschlossen ist. Andernfalls wird der   Hook seine Wirkung nicht entfalten. useNavigate <BrowserRouter /> useLocation  Auf Standortänderungen reagieren  Wenn sich der Standort ändert, können Sie den   Hook verwenden, um auf den aktuellen URL-Pfad in React Router zuzugreifen. Indem Sie Ihren Code mit einem   Hook umschließen und die Abhängigkeit auf   setzen, können Sie einen bestimmten Codeabschnitt immer dann ausführen, wenn eine Navigation zu einer neuen URL erfolgt. useLocation useEffect location  Hier ist ein Beispiel dafür:   import React, {useEffect} from "react"; import {BrowserRouter, Routes, Route, useLocation} from "react-router-dom"; import {createRoot} from "react-dom/client"; function App() { const location = useLocation(); // run a piece of code on location change useEffect(() => { console.log(location.pathname); // send it to analytic, or do some conditional logic here }, [location]); return <Routes> {/* routes here... */} </Routes> } createRoot(document.querySelector("#react-root")).render(<BrowserRouter><App /></BrowserRouter>);  Immer wenn der Benutzer während der Navigation zu einer neuen Route wechselt, wird der Code im   Hook ausgeführt und erledigt seine Aufgabe. Dies ist im Grunde eine Möglichkeit, sicherzustellen, dass bei jeder Änderung des Standortobjekts ein bestimmter Code ausgeführt wird. useEffect  Gute Arbeit, jetzt sind Sie ein React-Router-Experte 🥳  Zum Abschluss hat Ihnen dieser Artikel ein tieferes Verständnis von React Router vermittelt. Möglicherweise nutzen Sie jedoch nicht alle hier besprochenen Funktionen. Dennoch ist es fantastisch, dass Sie sich dessen bewusst sind. Wenn Sie jemals feststellen, dass Sie in Zukunft ähnliche Funktionen integrieren müssen, wissen Sie genau, wo Sie suchen müssen. Speichern Sie diesen Beitrag also unbedingt ab oder markieren Sie ihn mit einem Lesezeichen, damit Sie ihn leichter nachschlagen können. Und denken Sie daran: Wenn Sie Fragen haben oder weitere Hilfe benötigen, können Sie mich gerne auf Twitter kontaktieren. Ich bin hier um zu helfen!

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

Erweiterte React Router V6-Techniken: Über die Grundlagen hinausgehen

About Author

KOMMENTARE

Hängeetiketten

DIESER ARTIKEL WURDE VORGESTELLT IN

Related Stories

HackerNoon Decoded 2024: Celebrating Our Tech Stories Community!

HackerNoon Decoded 2024: Celebrating Our Programming Community!

HackerNoon Decoded: The Top 10 Countries Where HackerNoon Is the Most Active

HackerNoon Decoded 2024: Celebrating Our Tech Stories Community!

HackerNoon Decoded 2024: Celebrating Our Programming Community!

HackerNoon Decoded: The Top 10 Countries Where HackerNoon Is the Most Active

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps