React Router DOM でナビゲートする際のデータの受け渡しに関する主な問題は、URL クエリ文字列でデータを渡す必要があることです。 つまり、機密情報は URL に表示されるため、渡す前にエンコードする必要があります。 また、データが大きすぎると、URL の最大長を超えてエラーが発生する可能性があります。 最後に、React Router DOM を使用してアプリケーション内のページ間を移動する場合は、状態を手動で管理し、変更を追跡して、すべてのコンポーネントが同じデータにアクセスできるようにする必要があります。
import { useHistory } from "react-router-dom";
const MyComponent = () => {
const history = useHistory();
const handleClick = (data) => {
history.push({ pathname: '/myroute', state: data }); // pass data to route as state object
};
return (
<button onClick={() => handleClick(data)}>Go to MyRoute</button>
);
};
// 行 1: この行は、react-router-dom ライブラリから useHistory フックをインポートします。
// 行 3: この行は、JSX を返す関数である MyComponent という定数を宣言します。
// 4 行目: この行は、react-router-dom からインポートされた useHistory フックに割り当てられる history という定数を宣言します。
// 6 行目: この行では、XNUMX つのパラメーター data を受け取る handleClick という関数を宣言しています。
// 7 行目: この行では、履歴オブジェクトを使用して、パス名 '/myroute' とオブジェクトとして渡された状態データを持つ新しいルートをスタックにプッシュします。
// 行 9 ～ 11: これらの行は、handleClick を呼び出してデータを引数として渡す onClick イベント ハンドラーを持つボタン要素を含む JSX を返します。
ReactルーターDom
React Router DOM は、開発者が React アプリケーション内でルートを作成および管理できるようにする React のルーティング ライブラリです。 Link、Route、Switch、BrowserRouter などのコンポーネントを含む、複雑な複数ページの Web アプリケーションを React で構築するために必要なコア コンポーネントを提供します。 また、動的ルート マッチングや位置追跡などの機能も提供します。 React Router DOM を使用すると、開発者は URL やブラウザーの履歴を手動で管理することなく、複数のビューとルートを備えた単一ページのアプリケーションを簡単に作成できます。
react-router-Dom でナビゲートしてデータを渡す方法
React Router では、history API の state オブジェクトを使用して、ナビゲーションを介してデータを渡すことができます。 状態オブジェクトは、によってレンダリングされた任意のコンポーネントの props を通じてアクセスできます。
const {履歴} = this.props;
歴史.push({
パス名: '/some/path',
状態: { someData: 'データ' }
}）;
