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

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

王林

リリース： 2023-09-26 14:15:39

オリジナル

850 人が閲覧しました

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

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

はじめに:

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

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

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

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

ルーティングルールの定義

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

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

動的パラメータの処理

上記の例では、定義したルーティングルール「/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>User Detail Page</h1>
        <p>User ID: {userId}</p>
    </div>
);

ログイン後にコピー

};

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

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

クエリパラメータ転送を使用します

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

import React from 'react';

const UserDetail = (props) => {

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

ログイン後にコピー

};

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

状態パラメータを使用して渡す

具体的な例は次のとおりです。
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>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 サイトの他の関連記事を参照してください。