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

React Router を使用してページから別のページにデータを渡す方法

React Router を使用する場合、必要な状況に遭遇することがあります。別の画面にユーザーの詳細を表示するなど、あるページから別のページにデータを渡すため。データを渡すためのいくつかのオプションを次に示します。

オプション 1: ルート ステートを渡す

• React Router DOM v6 の Link コンポーネント、または React Router DOM v6 の Navigate コンポーネントを使用します。 v5 を作成し、状態プロパティを設定します。
• 受信側で位置オブジェクトから状態を解凍します。
• 利点: URL に状態が表示されず、UI がきれいに保たれます。

オプション 2: URL パスに何かを渡す

• リンク コンポーネントまたはプログラムを使用して、データを URL パスに追加しますナビゲーション。
• 受信ページの props.match オブジェクトからパラメータにアクセスします。
• 利点: データは URL に保存され、簡単に共有できます。

オプション 3: URL クエリで何かを渡すString

• Link コンポーネントまたはプログラム ナビゲーションの検索プロパティを使用して、データをクエリ パラメーターとして渡します。
• useSearchParams フック (v6) または URLSearchParams オブジェクト (v5) を使用します。 ) を使用して、受信ページのクエリ パラメータを解析します。
• 利点: 少量のクエリ パラメータを簡単に渡すことができます。 data.

React クラス コンポーネントに関する考慮事項

• React Router DOM バージョン 6 では、ルート プロパティと withRouter HOC が削除されました。
• クラスコンポーネントのルートプロパティにアクセスするには、必要なフック。

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