Reactは、フロントエンドビューを作成するためのライブラリです。
シングルページアプリを構築するには、表示するReactコンポーネントにURLをマッピングする方法さいがあります
この記事では、ReactRouterのURLパラメーターにアクセスする方法を説明します。

URLパラメータが含まれたルートを定義しそして、URLパラメータを取得する

パラメータとして、idを持っているパスのルートを定義するため、パラメータネームの前にコロンを置いています。

例えば、次のようになります。

次に、useParamsフックを使用してURLパラメーターを取得することができます。
今回は、次のようなサンプルを使用します。

上のコードの中では、今、ことして、routeをもつappの中にswitchコンポーネントがあります。
このコンポーネントのpathのPROPは、 /:id が設定されています。
このことは、useParamsをフックを使用してルートパラメーターを取得できることを意味します。
次に、子プロップで、表示するUserコンポーネントを渡します。
また、propで指定されたURLパラメータを使用してURLに移動するためにクリックできるリンクを含むLinkコンポーネントを追加しました。
次に、Userコンポーネントで、useParamsフックを使用してURLパラメーターからIDを取得します。
最後に、user rootにIDを表示します。

Query Stringsの取得と設置

コンポーネントでuseQueryフックを定義して使用し、クエリパラメータを取得できます。クエリパラメータを渡すには、通常どおり、propsへリンクに追加します。
たとえば、次のように書くことができます。

最初にuseQueryフックを定義して、URLSearchParamsコンストラクターを介してURLのクエリパラメーターを取得しました。 useLocation（）の検索プロパティを取得します。
次に、useQuery（）を呼び出すQueryScreenコンポーネントを作成し、クエリに割り当てられたURLSearchParamsインスタンスを取得します。ここで、queryを使用して、渡された「name」を指定してgetを呼び出すことにより、namequeryパラメーターを取得できます。
次に、query.get（”name”）によって返された値をpropとしてUserコンポーネントに渡し、そこで表示します。

結論

useParamsフックを使用して、ルートで定義されたURLパラメーターを取得できることがわかりました。
path =”./：id”のように、pathパラメーターのパラメーター名の前にコロンを付けることで、RouteでURLパラメーターを受け入れることができることがわかりました。
パスにクエリ文字列を追加するには、パスに直接追加するだけです。
次に、クエリ文字列をURLSearchParamsインスタンスに変換し、その検索プロパティを使用してクエリ文字列を取得できます。
次に、キー名を指定したgetメソッドを使用して値を取得できます。

もし今後、React.jsをしようして、React RouterでURL ParametersとQuery Stringsを使用する方は、ぜひ参考にしてください。