React 動的ルーティング処理ガイド: フロントエンドの動的ページ ルーティングとパラメーター受け渡しを実装する方法

React 動的ルーティング処理ガイド: フロントエンドの動的ページ ルーティングとパラメーターの受け渡しを実装する方法

はじめに:

React アプリケーションでは、ルーティングはフロントエンドを実装することです。 -end ページ ジャンプとパラメータ受け渡しの重要なメカニズムの 1 つ。大規模なアプリケーションや動的ページを処理する必要がある状況では、柔軟なルーティング処理が不可欠です。この記事では、React で動的ページ ルーティングとパラメーター受け渡しを実装する方法を紹介し、読者の理解を助ける具体的なコード例を示します。

1. React ルーティングの基礎知識の復習

React では、ルーティング機能を実装するために React Router ライブラリをよく使用します。 React Router は、ルーティング ルールを定義するための コンポーネントを提供し、一致するルートを選択するために コンポーネントを使用します。基本的なルーティング コンポーネントには、主に BrowserRouter、HashRouter、Route、Link などが含まれます。 React Routerの詳しい使い方は公式ドキュメントを参照してください。

2. 動的ページ ルーティングの実装

1. 
   ルーティング ルールの定義
React では、 コンポーネントを通じてルーティング ルールを定義できます。ルーティング ルールでは、動的パラメータを使用してさまざまな URL を照合し、動的ページ ルーティングを実装できます。

たとえば、「/user/:id」形式の URL と一致する動的ルーティング ルールを定義したいとします。ここで、:id は動的パラメータを表します。次のようにルーティング ルールを定義できます。

2. 
   動的パラメータの処理
動的ルーティングの定義後ルールを設定した後、対応するコンポーネントの props を通じて URL に渡されたパラメーターを取得できます。

上記の例では、定義したルーティング ルール「/user/:id」は、「/user/123」形式の URL と一致します。 UserDetail コンポーネントでは、props.match.params を通じて URL 内の動的パラメーターを取得できます。

具体的な例は次のとおりです:
import React from 'react';

import { Route } from 'react-router-dom';

const UserDetail = (props) => ; {

const userId = props.match.params.id;
return (
    <div>
        <h1 id="User-Detail-Page">User Detail Page</h1>
        <p>User ID: {userId}</p>
    </div>
);

};

デフォルトの UserDetail をエクスポート;

3. パラメータ転送を実装します

1. 
   クエリ パラメータ転送を使用します
パラメータを渡すことに加えて、パラメータを渡すためにダイナミック ルーティング パラメータに加えて、クエリ パラメータを使用してパラメータを渡すこともできます。 Query パラメーターを使用すると、「/user?id=123」などのパラメーターを URL に直接追加し、ターゲット コンポーネントの props.location.search を通じてパラメーターを取得できます。

具体的な例は次のとおりです:

import React from 'react';

const UserDetail = (props) => {

const searchParams = new URLSearchParams(props.location.search);
const userId = searchParams.get('id');
return (
    <div>
        <h1 id="User-Detail-Page">User Detail Page</h1>
        <p>User ID: {userId}</p>
    </div>
);

};

デフォルトの UserDetail をエクスポート;

2. 
   状態パラメータを使用して渡す
クエリ パラメータに加えて、状態パラメータを使用してパラメータを渡すこともできます。 state パラメータは URL には表示されませんが、location.state オブジェクトに格納されます。ページにジャンプするときに、2 番目のパラメーターを介して state パラメーターを渡すことができます。

具体的な例は次のとおりです。
import React from 'react';

import { Link } from 'react-router-dom';

const UserList = () => {

const userList = [
    { id: 1, name: 'Alice' },
    { id: 2, name: 'Bob' },
    { id: 3, name: 'Charlie' }
];

return (
    <div>
        <h1 id="User-List-Page">User List Page</h1>
        <ul>
            {userList.map(user => (
                <li key={user.id}>
                    <Link
                        to={{
                            pathname: `/user/${user.id}`,
                            state: { name: user.name }
                        }}
                    >
                        {user.name}
                    </Link>
                </li>
            ))}
        </ul>
    </div>
);

};

デフォルトの UserList をエクスポート;

上記の例では、ページにジャンプするときに、 to を介してオブジェクトを渡します。 pathname はターゲット URL を指定し、state 属性は任意のパラメータを渡すことができます。 UserDetail コンポーネントでは、props.location.state を通じて渡されたパラメーターを取得できます。

概要:

React Router を介して、フロントエンドの動的ページ ルーティングとパラメーターの受け渡しを実装できます。ルーティング ルールを定義する場合、動的パラメーターを使用してさまざまな URL を照合し、props.match.params を通じてパラメーターを取得できます。さらに、クエリ パラメータや状態パラメータを通じてパラメータを渡すこともできます。 Query パラメーターを使用する場合は、props.location.search を通じてパラメーターを取得でき、state パラメーターを使用する場合は、props.location.state を通じてパラメーターを取得できます。

上記は React の動的ルーティング処理について簡単に紹介したもので、具体的なコード例を用いてルーティング処理の実装方法を理解しやすくしています。実際の開発では、必要に応じて動的ページ ルーティングとパラメータの受け渡しを処理する適切な方法を選択できます。 ###

以上がReact 動的ルーティング処理ガイド: フロントエンドの動的ページ ルーティングとパラメーター受け渡しを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。