React router v6 で route にパラメータを渡したい（クエリパラメータ編）

React router v6 でクエリパラメータを渡す

初心者が調べながらやっています。間違っていたら教えてください。

目的

• あるページを表示するComponentがある
• そのComponentに動的なパラメータ（ユーザが指定）を渡して表示をしたい

少し詳しめに

• React router v6を利用してページを切り替えている
• ページを切り替えるときについでにパラメータを渡すのが props で渡すより楽かなと思った
• 現時点ではApp.tsxという一番根本のところでRouteを設定している
• なので、最初にGUIからユーザの希望するパラメータを設定するためにはApp.tsxのRouteはできるだけパスだけにしておいて
• あとからパラメータを設定できるようにしないといけないと思った

このあたり、勉強したらもしかしたらもっとよい解決方法があるかもしれない。

今回試した方法

• React router v6
• Routerを利用してComponentへのリンクを定義
• navigate(useNavigate())でリンク先へ移動するときのアドレスにパラメータを入れる
• それをComponent側で受け取って処理を進める

Router の設定自体は普通のままで大丈夫

<Route path="/results" element={<Results />} />

これでリンクをナビゲートするときにパラメータを渡すのが以下

やりたいことはリンク先に username と subject を渡すということ
(JavaScript の　テンプレートリテラルを利用して呼び出す側で定義しているパラメタをリンクに含めてあげる)

navigate(`/results?username=${selectedUser.name}&subject=${subject}`);

Component側でクエリパラメータを解釈する仕組みを以下のように実装した

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

export const Results = () => {
　// こういうhooksがあるらしい
  const [searchParams] = useSearchParams();
  const username = searchParams.get("username");
  const subject = searchParams.get("subject");

  console.log("Username=" + username);
  console.log("Subject =" + subject);

  return (
    <>
      <h1> Hello {username}</h1>
      <h1> Your quiz results of {subject}</h1>
    </>
  );
};

これで無事にResultsコンポーネントにパラメータ username と subject を渡すことができた。