解決済み: URL 反応ルーター dom v6 からクエリを取得する

URL React Router DOM v6 からクエリを取得することに関連する主な問題は、クエリ パラメータにアクセスするための組み込みの方法が提供されていないことです。 代わりに、開発者は手動で URL 文字列を解析し、クエリ パラメータ自体を抽出する必要があります。 これは面倒なプロセスになる可能性があり、正しく行わないとエラーが発生する可能性があります。 さらに、URL 構造が変更された場合は、それに応じてコードを更新する必要がある場合があります。

import { useLocation } from "react-router-dom";

const MyComponent = () => {
  const location = useLocation();

  const queryParams = new URLSearchParams(location.search);

  return (
    <div>
      <h1>My Component</h1>
      <p>Query Param: {queryParams.get("myParam")}</p>
    </div>
  );  
};

1. 「'react-router-dom' から { useLocation } をインポートします。」 – この行は、react-router-dom ライブラリから useLocation フックをインポートします。
2. “const MyComponent = () => {” – この行は、React コンポーネントを返す MyComponent という関数を宣言します。
3.「const location = useLocation();」 – この行は、インポートされた useLocation フックを使用して、アプリケーションの現在の場所 (URL など) に関する情報を取得します。
4.「const queryParams = new URLSearchParams(location.search);」 – この行は、現在の URL のすべてのクエリ パラメータを含むオブジェクトを作成します (例: ?myParam=foo)。
5. コードの残りの部分は、URL クエリ文字列 (存在する場合) に myParam の値を表示する h1 および p タグを含む React コンポーネントを返すだけです。

React ルーター Dom

React Router DOM は、開発者が React アプリケーション内でルートを作成および管理できるようにする React のルーティング ライブラリです。 アプリケーションをナビゲートするための API を提供し、開発者がルートを宣言的に定義し、現在の URL に基づいてコンポーネントをレンダリングし、アプリケーションのさまざまな部分をリンクできるようにします。 また、動的ルート マッチング、位置追跡、ナビゲーション ガードなどの機能もサポートしています。

反応v6ルーターでクエリ文字列を取得するにはどうすればよいですか

v6

React Router v6 では、useLocation フックを使用してクエリ文字列パラメーターにアクセスできます。 このフックは、パス名、検索、ハッシュ、および状態のプロパティを含む現在の URL に関する情報を含む場所オブジェクトを返します。 検索プロパティには、クエリ文字列パラメーターが文字列として含まれています。 次に、この文字列を解析して、すべてのクエリ文字列パラメーターを含むオブジェクトを取得できます。
例：
const {検索} = useLocation();
const params = 新しい URLSearchParams(検索);
const param1 = params.get('param1');

関連記事：

コメント