私の React の旅: 27 日目

反応ルーター

今日の焦点は、React シングルページ アプリケーション (SPA) でシームレスなナビゲーションを構築するための重要なツールである React Router をマスターすることにあります。私の学習の旅と発見をご紹介します!

React Router でナビゲーションを構築して学んだこと
1.セットアップとインストール:
React Router の使用を開始するために、次のライブラリをインストールしました。

npm install react-router-dom

次に、必要なモジュールをインポートしました。

import { createBrowserRouter, RouterProvider } from 'react-router-dom';

2.ルートの作成:
createBrowserRouter を使用してルートを作成し、パスを定義して特定のコンポーネントにリンクしました。

例:

const router = createBrowserRouter([
  { path: '/', element: <HomePage /> },
  { path: '/profiles', element: <ProfilesPage /> },
  { path: '/profiles/:profileId', element: <ProfilePage /> },
]);

• 動的 URL: ルート パス:'/profiles/:profileId' は動的ルーティングを示します。これにより、profileId に基づいて固有のプロフィール ページをレンダリングできます。
• エラー処理: errorElement を追加すると、無効な URL に移動したユーザーには 404 Not Found ページが表示されます。

3.404 エラーの処理:
React Router の Link コンポーネントを使用してカスタム エラー ページ (NotFoundPage.jsx) を作成しました:

<Link to="/">Home</Link>

これにより、ブラウザを完全に更新しなくてもホームページに戻ることができ、SPA エクスペリエンスが維持されます。

4.コンポーネントを動的にマッピングする:
ProfilesPage.jsx では、map メソッドを使用して各プロファイルのリンクを動的に生成しました。

{profiles.map((profile) => (
  <Link key={profile} to={`/profiles/${profile}`}>
    Profile {profile}
  </Link>
))}

これにより、コードを書き直さずに新しいプロファイルを追加できるため、スケーラブルになります。

5.ページ構造:
各ページ/コンポーネントは特定の目的を果たします:

• HomePage: ユーザーが / にアクセスすると、デフォルトのコンテンツが表示されます。
• ProfilesPage: 個々のプロファイルへのリンクをリストします。
• ProfilePage: 特定のプロファイルに関連する動的コンテンツのプレースホルダーを表示します。
• NotFoundPage: 無効な URL を処理し、ユーザー エクスペリエンスを向上させます。

6.全ページ更新の回避:
を使用すると、 の代わりにコンポーネントを使用します。タグにより、不必要な全ページのリロードが防止されます。これにより、アプリケーションの高速性と応答性が維持されます。

7.ネストされたビューのレンダリング:
React Router を使用すると、ルートを効率的に構造化することで、ネストされたコンポーネントやレイアウトを簡単にレンダリングできます。

最終的な考え
React Router は、機能豊富でユーザーフレンドリーな SPA を構築するために不可欠なツールです。動的にルーティングし、エラーを適切に処理し、シームレスなナビゲーション エクスペリエンスを保証するその機能は強力です。

以上が私の React の旅: 27 日目の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。