ReactでURLからクエリパラメーターを取得してみた

2023.05.16 08:00
2023.05.29 14:53
ReactでURLからクエリパラメーターを取得してみた

ReactでGETなどで渡されたURLにあるクエリパラメーターを取得してみました。
react-router-domとuseParamsを使うみたいですね。

react-router-domで所定のリンクを設定し、リンク先でuseParamsを使って値を取得するって感じみたいです。

1. リンク元の設定

まずはreact-router-domを使って「Router.tsx」というリンク元ページを作ります。

import { BrowserRouter, Route, Routes } from "react-router-dom";

export const Router: React.FC = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" key="home" element={<Home />} />
        <Route path="/spot/:id" key="spot" element={<SpotPage />} />
      </Routes>
    </BrowserRouter>
  );
};

「http://localhost:3000/spot/1」って感じでアクセスします。

2. リンク先（パラメータ取得ページ）の設定

つぎにクリックした先のページを作ってみます。

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

export const SpotPage: React.FC = () => {
  // idの取得
  const { id } = useParams();

  return (
    <>
      内容
    </>
  );
};

const { id } = useParams(); でidを取得します。
これは1で設定した「<Route path=”/spot/:id” key=”spot” element={<SpotPage />} />」で「:id」を指定しているから取得できるみたいで、id以外だと取れないですね。

今回は以上です！