この記事では、React アウトレットがどのように機(jī)能するか、および React アプリケーションのルーティングの基礎(chǔ)について説明します。何よりもまず、ルーティングの基本を理解する必要があります

基本を理解する

本題に入る前に、React Router についてしっかりと理解しておいてください。

• React Router とは何ですか? React Router は、React アプリケーションの異なるビュー間のナビゲーションを可能にする人気の JavaScript ライブラリです。 URL を特定のコンポーネントにマップするルートを定義できます。詳細(xì)..

• ルーティングが重要な理由 ルーティングは、ユーザーがページ全體をリロードせずにナビゲートできるシングルページ アプリケーション (SPA) を構(gòu)築するために不可欠であり、よりスムーズで動(dòng)的なエクスペリエンスを?qū)g現(xiàn)します。

それでは、React アウトレットについて見(jiàn)ていきましょう

リアクトアウトレットとは何ですか?

コンポーネントは、親ルートのコンポーネント內(nèi)のプレースホルダーで、React Router に子ルートをレンダリングする場(chǎng)所を指示します。これは、現(xiàn)在の URL に基づいてコンテンツを変更する動(dòng)的コンテナのように機(jī)能します。
この機(jī)能は、ページの一部 (ヘッダーやサイドバーなど) の一貫性が維持され、他の部分がルートに基づいて動(dòng)的に変更される複雑なレイアウトの管理に役立ちます。

仕組み: URL が親ルートと一致すると、React Router は を探します。その親コン??ポーネント內(nèi)で。次に、一致する子ルートのコンポーネントをその にレンダリングします。

React アプリケーションに適切な反応ルーティングを備えたアウトレットを?qū)g裝してみましょう

import React from "react";

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

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

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

この AllRoutes コンポーネントは、react Web アプリ內(nèi)の異なるページ間のナビゲーションを処理する、react-router-dom を使用して React アプリケーションのルーティング システムを定義します。コードの詳細(xì)な內(nèi)訳は次のとおりです

import React from "react";

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

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

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

パッケージのインポート

BrowserRouter: このコンポーネントはブラウザでのルーティングを有効にします。 HTML5 履歴 API を使用して、UI と URL の同期を維持します。
アウトレット、ルート、ルート: これらのコンポーネントは、アプリケーション內(nèi)のさまざまなルート (またはページ) を定義および処理します。
Suspense: Suspense は、遅延ロードされたコンポーネントを処理するために使用されます。コンポーネントのロード中にフォールバック コンポーネント (この場(chǎng)合はカスタム ローダー) が表示されます。
Lazy: この関數(shù)は、必要な場(chǎng)合にのみコンポーネントを遅延ロードすることでコード分割を可能にし、初期バンドル サイズを削減することでアプリのパフォーマンスを向上させます。
ローダー: これは、コンポーネントが遅延ロードされている間に読み込みインジケーターを表示するカスタム コンポーネントです。
ProtectedRoute: このカスタム コンポーネントは、承認(rèn)されたユーザーのみが特定のルートにアクセスできるようにし、セキュリティを強(qiáng)化します。
ルート ルート (/): このルートはアプリケーションのルート パス用です。 Login コンポーネントをレンダリングします。

ルート パスのインポート

アプリケーションは、事前定義されたパス (ダッシュボード、ホームパス、ログインパス、ルートパスなど) を別のファイル (ルートパス) からインポートします。これにより、コードの保守が容易になり、コンポーネント內(nèi)のルート パスのハードコーディングが回避されます。

AllRoutesComponent でのルートの定義

メイン関數(shù) AllRoutesComponent は、アプリ內(nèi)のさまざまなルートがどのように処理されるかを定義します。
: ルーティング構(gòu)造をラップし、ブラウザのナビゲーションを管理します。
: このコンポーネントは、アプリケーションの定義されたすべてのルートを保持します。
: 単一のルートを定義します。 path prop は URL パターンを定義し、要素 prop はそのルートに対してレンダリングするコンポーネントを指定します。

• ルート (rootPath) ルートは、子ルートのコンテナとして機(jī)能します。

• ユーザーが / パスにアクセスすると、インデックス ルートはデフォルトで LoginComponent をレンダリングします。

• /login パスは LoginComponent もレンダリングします。

• /home や /dashboard などのルートは ProtectedRoute コンポーネント內(nèi)にラップされ、承認(rèn)されたユーザーのみがこれらのページにアクセスできるようにします。

: これにより、ネストされたルートをレンダリングできます。子ルート (/login、/home など) は親ルート (rootPath) 內(nèi)にレンダリングされます。

保護(hù)されたルートとは何ですか?

一部のルート (homePath やダッシュボードなど) は ProtectedRoute 要素內(nèi)にネストされています。これは、ユーザーがこれらのページにアクセスするには、特定の條件 (ログインなど) を満たす必要があることを意味します。ユーザーが承認(rèn)されていない場(chǎng)合、ProtectedRoute コンポーネントは通常、ユーザーをログイン ページまたはエラー ページにリダイレクトします。
保護(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;

コードの説明

• パッケージのインポート

React、{ useEffect }: React は UI を構(gòu)築するためのコア パッケージであり、useEffect は機(jī)能コンポーネントで副作用を?qū)g行するフックです。ここでは、ユーザーが認(rèn)証されていない場(chǎng)合にリダイレクトを処理するために useEffect が使用されます。
useNavigate:react-router-dom のこのフックにより、プログラムによるナビゲーションが可能になります。ユーザーが認(rèn)証されていない場(chǎng)合にユーザーをリダイレクトするために使用されます。
アウトレット: これは、保護(hù)されたルート內(nèi)のネストされたルートのプレースホルダーです。これにより、子ルートを動(dòng)的にレンダリングできるようになります。
BaseLayout: このコンポーネントは、保護(hù)されたルートをレイアウトでラップし、保護(hù)されたページに一貫した外観と構(gòu)造を提供します。

• コンポーネントの定義

useNavigate(): このフックを使用すると、さまざまなルートに移動(dòng)できます。この場(chǎng)合、ユーザーが認(rèn)証されていない場(chǎng)合に rootPath に移動(dòng)するために使用されます。
isAuthenticated および user: これらの値は現(xiàn)時(shí)點(diǎn)ではハードコーディングされていますが、通常はグローバル狀態(tài)またはコンテキストから認(rèn)証狀態(tài) (JWT トークン、セッション データなど) をチェックすることによって動(dòng)的に設(shè)定できます。
isAuthenticated: ユーザーが認(rèn)証されているかどうかを決定するフラグ。 false の場(chǎng)合、ユーザーはリダイレクトされます。
user: 現(xiàn)在ログインしているユーザー。この値はコンテキストまたはグローバル狀態(tài)から動(dòng)的に取得できますが、現(xiàn)時(shí)點(diǎn)ではハードコードされた文字列 ('shruti') です。

useEffect: useEffect フックは、認(rèn)証されるか、変更に移動(dòng)するたびに実行されます。
useEffect 內(nèi)のコードは、ユーザーが認(rèn)証されているかどうかをチェックします。そうでない場(chǎng)合 (! 認(rèn)証されている場(chǎng)合)、ユーザーはナビゲート機(jī)能を使用してルート パスにリダイレクトされます。
{ replace: true } オプションを使用すると、ブラウザの履歴にリダイレクトが追加されなくなります。つまり、ユーザーは保護(hù)されたページに戻ることができなくなります。

それでは、BaseLayout コンポーネントのコードを見(jiàn)てみましょう

import React from "react";

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

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

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

BaseLayout コンポーネントは、アプリケーション內(nèi)のすべてのページの共通レイアウト構(gòu)造として機(jī)能します。
サイドバーやメインコンテンツ領(lǐng)域などの共通要素が含まれています。
さまざまなルートの子コンポーネントは、メイン コンテンツ領(lǐng)域內(nèi)の Outlet コンポーネントを使用してレンダリングされます。

この記事を試して、ルーター アウトレットを使用した遅延読み込みルーティングを?qū)g裝してください

結(jié)論

React の Outlet を使用した遅延読み込みルーティングは、アプリの初期読み込み時(shí)間を短縮することでパフォーマンスを最適化する強(qiáng)力な方法です。 React.lazy() と Suspense を使用すると、コンポーネントが必要な場(chǎng)合にのみロードされるようになり、Outlet コンポーネントにより効率的なネストされたルーティングが可能になります。このアプローチは、保護(hù)されたルートの使用と組み合わせることで、アプリケーション內(nèi)のルートを管理するためのモジュール式でスケーラブルでパフォーマンスに優(yōu)れた構(gòu)造を提供します。

それでおしまい！

ぜひ試してみて、コメントでご意見(jiàn)をお聞かせください!

以上が適切なルーティングを備えた React Outlet について理解するの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。