React Router を使用してページ間でデータを渡すにはどうすればよいですか?

React Router ページ間でのデータの受け渡し

概要

React Router は、React アプリケーションにナビゲーションを実装するための強力なライブラリです。これにより、ルートを定義し、ページ遷移をシームレスに処理できます。一般的な使用例の 1 つは、表示またはさらなる処理のためにページ間でデータを渡すことです。

解決策:

オプション 1: ルート状態

React Router v6 では、状態を使用できます。 Link または Navigate コンポーネントのプロパティを使用して、ナビゲーション時にデータを渡します。このデータは、宛先ページの場所オブジェクトを通じてアクセスできます。

オプション 2: URL パス

もう 1 つのオプションは、: 表記を使用して URL パスにデータを組み込むことです。データは、宛先ページの match props から取得できます。

オプション 3: URL クエリ文字列

URL パスを使用する場合と同様に、URL クエリ文字列にデータを追加できます。 ?シンボル。このデータには、useSearchParams フックまたは宛先ページの location オブジェクトの検索プロパティを介してアクセスできます。

例:

ユーザーのリストから特定のユーザーに移動するシナリオを考えてみましょう。詳細ページ。

// User List Page
import React, { Component } from "react";

export default class User extends Component {
  render() {
    return (
      {this.props.users.map(user => (
        <Link key={user.id} to={`/user/${user.id}`}>
          {user.name}
        </Link>
      ))}
    );
  }
}

// User Details Page
import React from "react";
import { useParams } from "react-router-dom";

export default function UserDetails() {
  const { id } = useParams();
  return (
    {id}
  );
}

この例では、ユーザーがユーザー名をクリックすると、 UserDetails ページに移動し、URL パスを通じてユーザーの ID を受け取ります。

以上がReact Router を使用してページ間でデータを渡すにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。