Verstehen Sie React Outlet mit der richtigen Weiterleitung

In diesem Artikel werden die Funktionsweise von React-Outlets und die Routing-Grundlagen in React-Anwendungen erläutert. Zuallererst müssen wir die Grundlagen des Routings verstehen

Die Grundlagen verstehen

Bevor wir uns damit befassen, stellen wir sicher, dass wir ein solides Verständnis von React Router haben.

• Was ist ein React Router? React Router ist eine beliebte JavaScript-Bibliothek, die die Navigation zwischen verschiedenen Ansichten in einer React-Anwendung ermöglicht. Sie können damit Routen definieren, die URLs bestimmten Komponenten zuordnen. Mehr..

• Warum ist Routing wichtig? Routing ist für die Erstellung von Single-Page-Anwendungen (SPAs) unerlässlich, in denen der Benutzer navigieren kann, ohne die gesamte Seite neu laden zu müssen, wodurch ein reibungsloseres und dynamischeres Erlebnis entsteht.

Jetzt tauchen wir ein in das React Outlet

Was ist React Outlet?

Das Komponente ist ein Platzhalter innerhalb der Komponente einer übergeordneten Route, der React Router mitteilt, wo die untergeordneten Routen gerendert werden sollen. Es verhält sich wie ein dynamischer Container, der seinen Inhalt basierend auf der aktuellen URL ändert.
Diese Funktion hilft bei der Verwaltung komplexer Layouts, bei denen ein Teil der Seite konsistent bleibt, z. B. Kopfzeilen oder Seitenleisten, während sich andere Teile je nach Route dynamisch ändern.

Wie funktioniert es: Wenn die URL mit einer übergeordneten Route übereinstimmt, sucht der React Router nach einem innerhalb der übergeordneten Komponente. Anschließend wird die Komponente der passenden untergeordneten Route in diesem gerendert.

Lassen Sie uns das Outlet mit dem richtigen React-Routing für die React-Anwendung implementieren

import React from "react";

// import components
import AllRoutes from "./routes";

// component
const App = () => {
  return (
    <>

      <AllRoutes />
    </>
  );
};
export default App;

Diese AllRoutes-Komponente definiert ein Routing-System für eine React-Anwendung mithilfe von „react-router-dom“, das die Navigation zwischen verschiedenen Seiten in einer React-Web-App verwaltet. Hier ist eine detaillierte Aufschlüsselung des Codes

import React from "react";

// import components
import AllRoutes from "./routes";

// component
const App = () => {
  return (
    <>

      <AllRoutes />
    </>
  );
};
export default App;

Pakete importieren

BrowserRouter: Diese Komponente ermöglicht das Routing im Browser. Es verwendet die HTML5-Verlaufs-API, um die Benutzeroberfläche mit der URL synchron zu halten.
Outlet, Route, Routen: Diese Komponenten definieren und verwalten die verschiedenen Routen (oder Seiten) in der Anwendung.
Suspense: Suspense wird verwendet, um verzögert geladene Komponenten zu verarbeiten. Es zeigt eine Fallback-Komponente (in diesem Fall einen benutzerdefinierten Loader) an, während die Komponente geladen wird.
lazy: Diese Funktion ermöglicht die Codeaufteilung, indem Komponenten nur dann verzögert geladen werden, wenn sie benötigt werden, wodurch die Leistung der App durch Reduzierung der anfänglichen Bundle-Größe verbessert wird.
Loader: Dies ist eine benutzerdefinierte Komponente, die eine Ladeanzeige anzeigt, während die Komponenten langsam geladen werden.
ProtectedRoute: Diese benutzerdefinierte Komponente stellt sicher, dass bestimmte Routen nur autorisierten Benutzern zugänglich sind, und erhöht so die Sicherheit.
Root-Route (/): Diese Route ist für den Root-Pfad unserer Anwendung. Es rendert die Login-Komponente.

Routenpfade importieren

Die Anwendung importiert vordefinierte Pfade (z. B. Dashboard, HomePath, LoginPath, RootPath) aus einer separaten Datei (routePaths). Dies erleichtert die Wartung des Codes und vermeidet die Festcodierung von Routenpfaden innerhalb der Komponenten.

Routen in der AllRoutesComponent definieren

Die Hauptfunktion AllRoutesComponent definiert, wie die verschiedenen Routen in der App gehandhabt werden:
: Umschließt die Routing-Struktur und verwaltet die Browser-Navigation.
: Diese Komponente enthält alle definierten Routen der Anwendung.
: Definiert eine einzelne Route. Die Pfadstütze definiert das URL-Muster und die Elementstütze gibt die Komponente an, die für diese Route gerendert werden soll.

• Die Root-Route (rootPath) dient als Container für untergeordnete Routen.

• Die Indexroute rendert die LoginComponent standardmäßig, wenn der Benutzer den /-Pfad besucht.

• Der /login-Pfad rendert auch die LoginComponent.

• Routen wie /home und /dashboard sind in eine ProtectedRoute-Komponente eingebettet, um sicherzustellen, dass nur autorisierte Benutzer auf diese Seiten zugreifen können.

: Dies ermöglicht das Rendern verschachtelter Routen. Alle untergeordneten Routen (wie /login, /home) werden innerhalb der übergeordneten Route (rootPath) gerendert.

Was sind die geschützten Routen?

Einige Routen (wie HomePath und Dashboard) sind in einem ProtectedRoute-Element verschachtelt. Das bedeutet, dass Benutzer bestimmte Bedingungen erfüllen müssen (z. B. angemeldet sein), um auf diese Seiten zugreifen zu können. Wenn ein Benutzer nicht autorisiert ist, leitet ihn die ProtectedRoute-Komponente normalerweise zur Anmeldeseite oder einer Fehlerseite weiter.
Hier ist der Code der geschützten Route

// import packages

import { BrowserRouter, Outlet, Route, Routes } from "react-router-dom";
import React, { Suspense, lazy } from "react";
import {
  dashboard,
  homePath,
  loginPath,
  rootPath
} from "./routePaths";

import Loader from "../components/loader";
import ProtectedRoute from "./protectedRoute";

// import route paths

const LoginComponent = lazy(() => import("../pages/login"));
const HomeComponent = lazy(() => import("../pages/home"));
const RouteNotFoundComponent = lazy(() => import("../pages/pageNotFound"));

const DashboardComponent = lazy(() => import("../pages/dashboard/"));

const AllRoutesComponent = () => {
  return (
    <Suspense fallback={<Loader />}>
      <BrowserRouter>
        <Routes>
          <Route path={rootPath} element={<Outlet />}>
            <Route index element={<LoginComponent />} />
            <Route path={loginPath} element={<LoginComponent />} />
            <Route element={<ProtectedRoute />}>
              <Route path={homePath} element={<HomeComponent />} />
              <Route path={dashboard} element={<DashboardComponent />} />
            </Route>
            <Route path="*" element={<RouteNotFoundComponent />} />
          </Route>
        </Routes>
      </BrowserRouter>
    </Suspense>
  );
};

export default AllRoutesComponent;

Erklärung zum Code

• Pakete importieren

React, { useEffect }: React ist das Kernpaket zum Erstellen der Benutzeroberfläche, und useEffect ist ein Hook, der Nebenwirkungen in Funktionskomponenten ausführt. Hier wird useEffect verwendet, um die Umleitung zu handhaben, wenn der Benutzer nicht authentifiziert ist.
useNavigate: Dieser Hook von React-Router-Dom ermöglicht die programmatische Navigation. Es wird verwendet, um Benutzer umzuleiten, wenn sie nicht authentifiziert sind.
Outlet: Dies ist ein Platzhalter für verschachtelte Routen innerhalb der geschützten Route. Es ermöglicht das dynamische Rendern untergeordneter Routen.
BaseLayout: Diese Komponente umschließt die geschützte Route mit einem Layout und sorgt so für ein einheitliches Aussehen und eine einheitliche Struktur für geschützte Seiten.

• Komponentendefinition

useNavigate(): Dieser Hook ermöglicht die Navigation zu verschiedenen Routen. In diesem Fall wird es verwendet, um zum RootPath zu navigieren, wenn der Benutzer nicht authentifiziert ist.
isAuthenticated und user: Diese Werte sind vorerst fest codiert, können aber dynamisch festgelegt werden, typischerweise durch Überprüfen eines Authentifizierungsstatus (wie eines JWT-Tokens, Sitzungsdaten usw.) aus einem globalen Status oder einem Kontext.
isAuthenticated: Ein Flag, das bestimmt, ob der Benutzer authentifiziert ist. Bei „false“ wird der Benutzer umgeleitet.
Benutzer: Der aktuell angemeldete Benutzer. Dieser Wert kann dynamisch aus einem Kontext oder globalen Status abgerufen werden, aber im Moment handelt es sich um eine fest codierte Zeichenfolge („shruti“).

useEffect: Der useEffect-Hook wird bei jeder Authentifizierung ausgeführt oder navigiert durch Änderungen.
Innerhalb von useEffect prüft der Code, ob der Benutzer authentifiziert ist. Wenn nicht (! authentifiziert ist), wird der Benutzer mithilfe der Navigationsfunktion zum Root-Pfad weitergeleitet.
Die Option {replace: true } verhindert, dass die Umleitung zum Browserverlauf hinzugefügt wird, was bedeutet, dass der Benutzer nicht zur geschützten Seite zurückkehren kann.

Jetzt tauchen wir in den BaseLayout-Komponentencode ein

import React from "react";

// import components
import AllRoutes from "./routes";

// component
const App = () => {
  return (
    <>

      <AllRoutes />
    </>
  );
};
export default App;

Die BaseLayout-Komponente dient als gemeinsame Layoutstruktur für alle Seiten in unserer Anwendung.
Es enthält allgemeine Elemente wie eine Seitenleiste und einen Hauptinhaltsbereich.
Untergeordnete Komponenten aus verschiedenen Routen werden mithilfe der Outlet-Komponente im Hauptinhaltsbereich gerendert.

Versuchen Sie diesen Artikel, um das Lazy-Loading-Routing mit Router-Ausgang zu implementieren

Abschluss

Lazy Loading Routing mit Outlet in React ist eine leistungsstarke Möglichkeit, die Leistung zu optimieren, indem die anfängliche Ladezeit Ihrer App verkürzt wird. Durch die Verwendung von React.lazy() und Suspense stellen Sie sicher, dass Komponenten nur bei Bedarf geladen werden, während die Outlet-Komponente ein effizientes verschachteltes Routing ermöglicht. In Kombination mit der Verwendung geschützter Routen bietet dieser Ansatz eine modulare, skalierbare und leistungsfreundliche Struktur für die Verwaltung von Routen in Ihrer Anwendung.

Das ist es!

Probieren Sie es aus und teilen Sie mir Ihre Meinung in den Kommentaren mit!

Das obige ist der detaillierte Inhalt vonVerstehen Sie React Outlet mit der richtigen Weiterleitung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!