本文將探討 React 出口的功能以及 React 應用程序中的路由基礎知識。首先也是最重要的，我們需要了解路由的基礎知識

了解基礎知識

在深入研究之前，讓我們確保我們對 React Router 有深入的了解。

• 什么是 React Router？ ??React Router 是一個流行的 JavaScript 庫，可以在 React 應用程序中的不同視圖之間進行導航。它允許您定義路由，將 URL 映射到特定組件。更多..

• 為什么路由很重要？路由對于構建單頁應用程序 (SPA) 至關重要，用戶無需重新加載整頁即可導航，從而創(chuàng)建更流暢、更動態(tài)的體驗。

現(xiàn)在讓我們深入了解 React Outlet

什么是 React Outlet？

；組件是父路由組件中的占位符，它告訴 React Router 在哪里渲染子路由。它就像一個動態(tài)容器，根據(jù)當前 URL 更改其內(nèi)容。
此功能有助于管理復雜的布局，其中頁面的一部分保持一致，例如標題或側邊欄，而其他部分則根據(jù)路線動態(tài)變化。

它是如何工作的：當 URL 與父路由匹配時，React Router 會查找 。在該父組件內(nèi)。然后它將匹配的子路由的組件渲染到 中。

讓我們?yōu)?React 應用程序使用正確的 React 路由來實現(xiàn) Outlet

import React from "react";

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

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

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

這個AllRoutes組件使用react-router-dom為React應用程序定義了一個路由系統(tǒng)，它處理React Web應用程序中不同頁面之間的導航。這是代碼的詳細分解

import React from "react";

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

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

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

導入包

BrowserRouter：該組件支持在瀏覽器中進行路由。它使用 HTML5 歷史 API 來保持 UI 與 URL 同步。
Outlet、Route、Routes：這些組件定義和處理應用程序中的各種路由（或頁面）。
Suspense：Suspense 用于處理延遲加載的組件。它在加載組件時顯示后備組件（在本例中為自定義加載器）。
惰性：此函數(shù)僅在需要時才延遲加載組件，從而實現(xiàn)代碼分割，通過減少初始包大小來提高應用程序的性能。
加載器：這是一個自定義組件，在延遲加載組件時顯示加載指示器。
ProtectedRoute：此自定義組件可確保某些路由只能由授權用戶訪問，從而增強安全性。
根路由（/）：該路由用于我們應用程序的根路徑。它呈現(xiàn)登錄組件。

導入路線

應用程序從單獨的文件 (routePaths) 導入預定義路徑（例如儀表板、homePath、loginPath、rootPath）。這使得代碼更容易維護，并避免在組件內(nèi)硬編碼路由路徑。

在 AllRoutesComponent 中定義路由

主函數(shù) AllRoutesComponent 定義了如何處理應用程序中的不同路由：
：包裝路由結構并管理瀏覽器導航。
：該組件保存應用程序的所有定義的路由。
：定義單個路線。 path 屬性定義 URL 模式，element 屬性指定要為該路由渲染的組件。

• 根 (rootPath) 路由充當子路由的容器。

• 索引路由在用戶訪問 / 路徑時默認渲染 LoginComponent。

• /login 路徑也會渲染 LoginComponent。

• 像 /home 和 /dashboard 這樣的路由被包裝在 ProtectedRoute 組件中，確保只有授權用戶才能訪問這些頁面。

：這允許渲染嵌套路由。任何子路由（如 /login、/home）都會在父路由 (rootPath) 內(nèi)呈現(xiàn)。

受保護的路線有哪些？

一些路由（例如 homePath 和儀表板）嵌套在 ProtectedRoute 元素內(nèi)。這意味著用戶必須滿足某些條件（例如登錄）才能訪問這些頁面。如果用戶未經(jīng)授權，ProtectedRoute 組件通常會將其重定向到登錄頁面或錯誤頁面。
這是受保護路線的代碼

// 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;

代碼說明

• 導入包

React, { useEffect }：React 是構建 UI 的核心包，useEffect 是在功能組件中運行副作用的鉤子。這里，useEffect 用于處理用戶未通過身份驗證時的重定向。
useNavigate：react-router-dom 中的這個鉤子可以實現(xiàn)編程導航。它用于在用戶未經(jīng)身份驗證時重定向用戶。
Outlet：這是受保護路由內(nèi)嵌套路由的占位符。它允許動態(tài)渲染子路由。
BaseLayout：該組件用布局包裝受保護的路由，為受保護的頁面提供一致的外觀和結構。

• 組件定義

useNavigate()：這個鉤子允許導航到不同的路線。在本例中，如果用戶未經(jīng)過身份驗證，它用于導航到 rootPath。
isAuthenticated 和 user：這些值目前是硬編碼的，但可以動態(tài)設置，通常通過從全局狀態(tài)或上下文檢查某些身份驗證狀態(tài)（如 JWT 令牌、會話數(shù)據(jù)等）。
isAuthenticated：確定用戶是否經(jīng)過身份驗證的標志。如果為 false，則用戶將被重定向。
user：當前登錄的用戶。該值可以從上下文或全局狀態(tài)動態(tài)檢索，但目前，它是一個硬編碼字符串（'shruti'）。

useEffect：只要經(jīng)過身份驗證或?qū)Ш礁?，useEffect 掛鉤就會運行。
在 useEffect 內(nèi)部，代碼檢查用戶是否經(jīng)過身份驗證。如果沒有（！已通過身份驗證），則使用導航功能將用戶重定向到根路徑。
{ Replace: true } 選項可防止將重定向添加到瀏覽器的歷史記錄中，這意味著用戶將無法導航回受保護的頁面。

現(xiàn)在讓我們深入了解 BaseLayout 組件代碼

import React from "react";

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

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

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

BaseLayout 組件充當我們應用程序中所有頁面的通用布局結構。
它包含側邊欄和主要內(nèi)容區(qū)域等常見元素。
來自不同路由的子組件使用主內(nèi)容區(qū)域內(nèi)的 Outlet 組件進行渲染。

試試這篇文章，用routeroutlet實現(xiàn)延遲加載路由

結論

React 中使用 Outlet 進行延遲加載路由是通過減少應用程序的初始加載時間來優(yōu)化性能的強大方法。通過使用 React.lazy() 和 Suspense，您可以確保僅在需要時加載組件，而 Outlet 組件則允許高效的嵌套路由。與受保護路由的使用相結合，此方法提供了一個模塊化、可擴展且性能友好的結構，用于管理應用程序中的路由。

就是這樣！

嘗試一下，并在評論中告訴我你的想法！

以上是了解具有正確路由的 React Outlet的詳細內(nèi)容。更多信息請關注PHP中文網(wǎng)其他相關文章！