適切なルーティングを備えた React Outlet について理解する

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

基本を理解する

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

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

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

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

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

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

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

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

import React from "react";

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

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

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

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

import React from "react";

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

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

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

パッケージのインポート

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

ルート パスのインポート

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

AllRoutesComponent でのルートの定義

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

• ルート (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 />}>
      <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 のこのフックにより、プログラムによるナビゲーションが可能になります。ユーザーが認証されていない場合にユーザーをリダイレクトするために使用されます。
アウトレット: これは、保護されたルート内のネストされたルートのプレースホルダーです。これにより、子ルートを動的にレンダリングできるようになります。
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 />
    </>
  );
};
export default App;

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

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

結論

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

それでおしまい！

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

以上が適切なルーティングを備えた React Outlet について理解するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。