本文將探討 React 出口的功能以及 React 應(yīng)用程式中的路由基礎(chǔ)。首先也是最重要的，我們要了解路由的基礎(chǔ)知識(shí)

了解基礎(chǔ)知識(shí)

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

• 什麼是 React Router？ React Router 是一個(gè)流行的 JavaScript 函式庫(kù)，可以在 React 應(yīng)用程式中的不同視圖之間進(jìn)行導(dǎo)航。它允許您定義路由，將 URL 對(duì)應(yīng)到特定元件。更多..

• 為什麼路由很重要？ 路由對(duì)於建立單頁(yè)應(yīng)用程式 (SPA) 至關(guān)重要，使用者無需重新載入整頁(yè)即可導(dǎo)航，從而創(chuàng)建更流暢、更動(dòng)態(tài)的體驗(yàn)。

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

什麼是 React Outlet？

；元件是父路由元件中的佔(zhàn)位符，它告訴 React Router 在哪裡渲染子路由。它就像一個(gè)動(dòng)態(tài)容器，根據(jù)當(dāng)前 URL 更改其內(nèi)容。
此功能有助於管理複雜的佈局，其中頁(yè)面的一部分保持一致，例如標(biāo)題或側(cè)邊欄，而其他部分則根據(jù)路線動(dòng)態(tài)變化。

它是如何運(yùn)作的：當(dāng) URL 與父路由相符時(shí)，React Router 會(huì)尋找 。在該父組件內(nèi)。然後它將匹配的子路由的元件渲染到 中。

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

import React from "react";

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

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

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

這個(gè)AllRoutes元件使用react-router-dom為React應(yīng)用程式定義了一個(gè)路由系統(tǒng)，它處理React Web應(yīng)用程式中不同頁(yè)面之間的導(dǎo)航。這是代碼的詳細(xì)分解

import React from "react";

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

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

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

導(dǎo)入套件

BrowserRouter：此元件支援在瀏覽器中進(jìn)行路由。它使用 HTML5 歷史 API 來保持 UI 與 URL 同步。
Outlet、Route、Routes：這些元件定義和處理應(yīng)用程式中的各種路由（或頁(yè)面）。
Suspense：Suspense 用於處理延遲載入的元件。它在載入元件時(shí)顯示後備元件（在本例中為自訂載入器）。
惰性：此函數(shù)僅在需要時(shí)才延遲載入元件，從而實(shí)現(xiàn)程式碼分割，透過減少初始套件大小來提高應(yīng)用程式的效能。
載入器：這是一個(gè)自訂元件，在延遲載入元件時(shí)顯示載入指示器。
ProtectedRoute：此自訂元件可確保某些路由只能由授權(quán)使用者存取，從而增強(qiáng)安全性。
根路由（/）：該路由用於我們應(yīng)用程式的根路徑。它呈現(xiàn)登入元件。

導(dǎo)入路線

應(yīng)用程式從單獨(dú)的檔案 (routePaths) 匯入預(yù)定義路徑（例如儀表板、homePath、loginPath、rootPath）。這使得程式碼更容易維護(hù)，並避免在元件內(nèi)硬編碼路由路徑。

在 AllRoutesComponent 中定義路由

主函數(shù) AllRoutesComponent 定義如何處理應(yīng)用程式中的不同路由：
：包裝路由結(jié)構(gòu)並管理瀏覽器導(dǎo)航。
：該元件保存應(yīng)用程式的所有定義的路由。
：定義單一路線。 path 屬性定義 URL 模式，element 屬性指定要為該路由渲染的元件。

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

• 索引路由在使用者存取 / 路徑時(shí)預(yù)設(shè)渲染 LoginComponent。

• /login 路徑也會(huì)渲染 LoginComponent。

• 像 /home 和 /dashboard 這樣的路由被包裝在 ProtectedRoute 元件中，確保只有授權(quán)使用者才能存取這些頁(yè)面。

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

受保護(hù)的路線有哪些？

一些路由（如 homePath 和儀表板）嵌套在 ProtectedRoute 元素內(nèi)。這意味著用戶必須滿足某些條件（例如登入）才能存取這些頁(yè)面。如果使用者未經(jīng)授權(quán)，ProtectedRoute 元件通常會(huì)將其重新導(dǎo)向至登入頁(yè)面或錯(cuò)誤頁(yè)面。
這是受保護(hù)路線的代碼

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

代碼說明

• 導(dǎo)入套件

React, { useEffect }：React 是建構(gòu) UI 的核心包，useEffect 是在功能元件中運(yùn)行副作用的鉤子。這裡，useEffect 用於處理使用者未通過身份驗(yàn)證時(shí)的重定向。
useNavigate：react-router-dom 中的這個(gè)鉤子可以實(shí)現(xiàn)程式設(shè)計(jì)導(dǎo)航。它用於在用戶未經(jīng)身份驗(yàn)證時(shí)重定向用戶。
Outlet：這是受保護(hù)路由內(nèi)嵌套路由的佔(zhàn)位符。它允許動(dòng)態(tài)渲染子路由。
BaseLayout：此元件以佈局包裝受保護(hù)的路由，為受保護(hù)的頁(yè)面提供一致的外觀和結(jié)構(gòu)。

• 組件定義

useNavigate()：這個(gè)鉤子允許導(dǎo)航到不同的路線。在本例中，如果使用者未經(jīng)過身份驗(yàn)證，它用於導(dǎo)航至 rootPath。
isAuthenticated 和 user：這些值目前是硬編碼的，但可以動(dòng)態(tài)設(shè)置，通常透過從全域狀態(tài)或上下文檢查某些身份驗(yàn)證狀態(tài)（如 JWT 令牌、會(huì)話資料等）。
isAuthenticated：確定使用者是否經(jīng)過驗(yàn)證的標(biāo)誌。如果為 false，則使用者將被重定向。
user：目前登入的使用者。該值可以從上下文或全域狀態(tài)動(dòng)態(tài)檢索，但目前，它是一個(gè)硬編碼字串（'shruti'）。

useEffect：只要經(jīng)過身份驗(yàn)證或?qū)Ш礁?，useEffect 掛鉤就會(huì)運(yùn)作。
在 useEffect 內(nèi)部，程式碼檢查使用者是否經(jīng)過身份驗(yàn)證。如果沒有（！已通過身份驗(yàn)證），則使用導(dǎo)航功能將使用者重定向到根路徑。
{ Replace: true } 選項(xiàng)可防止將重定向新增至瀏覽器的歷史記錄中，這表示使用者將無法導(dǎo)覽回受保護(hù)的頁(yè)面。

現(xiàn)在讓我們深入了解 BaseLayout 元件程式碼

import React from "react";

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

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

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

BaseLayout 元件充當(dāng)我們應(yīng)用程式中所有頁(yè)面的通用佈局結(jié)構(gòu)。
它包含側(cè)邊欄和主要內(nèi)容區(qū)域等常見元素。
來自不同路由的子元件使用主內(nèi)容區(qū)域內(nèi)的 Outlet 元件進(jìn)行渲染。

試試這篇文章，用routeroutlet實(shí)作延遲載入路由

結(jié)論

React 中使用 Outlet 進(jìn)行延遲載入路由是透過減少應(yīng)用程式的初始載入時(shí)間來最佳化效能的強(qiáng)大方法。透過使用 React.lazy() 和 Suspense，您可以確保僅在需要時(shí)載入元件，而 Outlet 元件則允許高效的巢狀路由。與受保護(hù)路由的使用相結(jié)合，此方法提供了一個(gè)模組化、可擴(kuò)展且效能友善的結(jié)構(gòu)，用於管理應(yīng)用程式中的路由。

就是這樣！

嘗試一下，並在評(píng)論中告訴我你的想法！

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