React

React Router : useParamsを使う

Bykaori 2024-02-042024-02-04

今日はReact RouterのuseParamsについて。（React Routerの復習第一弾はこちらから）。
useParamsは以前使ったことはあるけど、また必要になったのでサクッと復習しよう。

useParamsとは

useParamsはReactRouterに用意されているHookの一つで、useParamsを使うとURLの指定した位置に入力された文字を取得できるので、それを使ってダイナミックにページの内容を変えたりできるようになる。どういう時に使うと便利なのか、具体的例を見た方がイメージしやすいと思うのでまずは使用例を紹介する。

今回やりたいこと：ポートフォリオサイトに、作品ごとのページを作りたい

作品数も少ないし、別に一つずつルート作ってもいいのだが、先々のことを考え、useParamsを使うことにする。例えばReact Routerの公式ページにあるuserIdのようにいちいち全てのUser ID分のRouteを作るのはそもそも無理！っていう場合もuseParamsが大活躍。

useParamsの書き方

import { createBrowserRouter } from "react-router-dom";
import App from "../App";
import AboutPage from "../Pages/AboutPage/AboutPage";
import HomePage from "../Pages/HomePage/HomePage";
import PortfolioPage from "../Pages/PortfolioPage/PortfolioPage";
import ErrorPage from "../Pages/ErrorPage/ErrorPage";
import PortfolioContent from "../Pages/PortfolioPage/PortfolioContent";

export const router = createBrowserRouter([
  {
    path: "/",
    element: <App />,
    errorElement: <ErrorPage />,
    children: [
      { path: "", element: <HomePage /> },
      { path: "about", element: <AboutPage /> },
      { path: "portfolio", element: <PortfolioPage /> }
    ]
  },
  {
    path: "portfolio/:projectId",
    element: <PortfolioContent />
  }
]);

まずは20〜23行目にpathを追加。ここで、”:projectId” のように「 : 」をつけるとprojectId というのがパラメータに変わる。こうすることでportfolio/の後に書いたものは全てprojectIdという言葉で呼び出せるようになる。

ポイントは3つ。

pathに「 : 」を使って名前をつけておく
実際に存在しないprojectIdもURLに入力できてしまうので、projecIdのパラメータに入ったものが、正しいかどうかを確認するステップを入れること
useParams()を使って指定したパラメータに入った言葉をコード内で使えるようにする

import { useParams } from "react-router";
import { projects } from "../../Routes/consts";

const PortfolioContent: React.FC = function () {
  const { projectId } = useParams();
  const project = projects.find((p) => p.projectId.toString() === projectId);

  return (
    <>
      {project ? (
        <div className="h-screen">
          <iframe
            src={project.githubPage ?? project.src}
            style={{ width: "100%", height: "100%", border: "none" }}
          ></iframe>
        </div>
      ) : (
        <div>No such project..</div>
      )}
    </>
  );
};

export default PortfolioContent;