了解具有正確路由的 React Outlet

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

了解基礎知識

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

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

• 為什麼路由很重要？ 路由對於建立單頁應用程式 (SPA) 至關重要，使用者無需重新載入整頁即可導航，從而創建更流暢、更動態的體驗。

現在讓我們深入了解 React Outlet

什麼是 React Outlet？

；元件是父路由元件中的佔位符，它告訴 React Router 在哪裡渲染子路由。它就像一個動態容器，根據當前 URL 更改其內容。
此功能有助於管理複雜的佈局，其中頁面的一部分保持一致，例如標題或側邊欄，而其他部分則根據路線動態變化。

它是如何運作的：當 URL 與父路由相符時，React Router 會尋找 。在該父組件內。然後它將匹配的子路由的元件渲染到 中。

讓我們為 React 應用程式使用正確的 React 路由來實現 Outlet

import React from "react";

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

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

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

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

import React from "react";

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

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

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

導入套件

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

導入路線

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

在 AllRoutesComponent 中定義路由

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

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

• 索引路由在使用者存取 / 路徑時預設渲染 LoginComponent。

• /login 路徑也會渲染 LoginComponent。

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

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

受保護的路線有哪些？

一些路由（如 homePath 和儀表板）嵌套在 ProtectedRoute 元素內。這意味著用戶必須滿足某些條件（例如登入）才能存取這些頁面。如果使用者未經授權，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"></suspense>}>
      <browserrouter>
        <routes>
          <route path="{rootPath}" element="{<Outlet"></route>}>
            <route index element="{<LoginComponent"></route>} />
            <route path="{loginPath}" element="{<LoginComponent"></route>} />
            <route element="{<ProtectedRoute"></route>}>
              <route path="{homePath}" element="{<HomeComponent"></route>} />
              <route path="{dashboard}" element="{<DashboardComponent"></route>} />
            
            <route path="*" element="{<RouteNotFoundComponent"></route>} />
          
        </routes>
      </browserrouter>
    
  );
};

export default AllRoutesComponent;

代碼說明

• 導入套件

React, { useEffect }：React 是建構 UI 的核心包，useEffect 是在功能元件中運行副作用的鉤子。這裡，useEffect 用於處理使用者未通過身份驗證時的重定向。
useNavigate：react-router-dom 中的這個鉤子可以實現程式設計導航。它用於在用戶未經身份驗證時重定向用戶。
Outlet：這是受保護路由內嵌套路由的佔位符。它允許動態渲染子路由。
BaseLayout：此元件以佈局包裝受保護的路由，為受保護的頁面提供一致的外觀和結構。

• 組件定義

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

useEffect：只要經過身份驗證或導航更改，useEffect 掛鉤就會運作。
在 useEffect 內部，程式碼檢查使用者是否經過身份驗證。如果沒有（！已通過身份驗證），則使用導航功能將使用者重定向到根路徑。
{ Replace: true } 選項可防止將重定向新增至瀏覽器的歷史記錄中，這表示使用者將無法導覽回受保護的頁面。

現在讓我們深入了解 BaseLayout 元件程式碼

import React from "react";

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

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

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

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

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

結論

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

就是這樣！

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

以上是了解具有正確路由的 React Outlet的詳細內容。更多資訊請關注PHP中文網其他相關文章！