🛣️

【Next.js】useRouterを使ってURLのパスやパラメータを取得する

2024/08/11に公開

Next.js

tech

useRouterとは

useRouterとは、Next.jsに用意されているフックの一種です。
後述するように、URLのパスやパラメータを取得するときに使えます。

※遷移先のURLを指定したりなどの使い方もありますが、今回の記事の趣旨とずれるので割愛します。
また、Pages Routerを使っている前提で記事を書いているので、その点ご留意ください。

リファレンスは以下です。

パスを取得する方法

主に、以下の3つがあります。

pathname
query
aspath

実際の挙動を見てみましょう。
動作確認用の簡単なコンポーネントを用意しました。

pages/hoge/[hogeId]/fuga/[fugaId].tsx

import { useRouter } from "next/router";

function TestComponent() {
  const router = useRouter();
  const pathname = router.pathname;
  const query = router.query;
  const asPath = router.asPath;

  return (
    <>
      <p>{pathname}</p>
      <p>{JSON.stringify(query)}</p>
      <p>{asPath}</p>
    </>
  );
}

export default TestComponent;

サーバーを立ち上げ、画面を確認した結果が以下です。
(http://localhost:3000/hoge/1/fuga/2?search=true にアクセスしました。)

上から順番に説明します。

pathname

pagesディレクトリ配下のパスがそのまま返されるイメージです。
表示された結果を見て分かるように、動的ルーティングのパラメータはパスに入っていません。
([hogeId]に渡した1も、[fugaId]に渡した2も入っておらず、
そのまま[hogeId]並びに[fugaId]として返されているのがわかります。)

query

クエリパラメータ並びに動的パラメータをオブジェクトとして返します。
個々のパラメータについて知りたい場合は、以下のように個別に値を取得してください。

const isSearch = router.query.search;
const hogeId = router.query.hogeId;
const fugaId = router.query.fugaId;

asPath

URL(相対パス)をそのまま返します。
挙動を見ていただければ分かるように、クエリパラメータも含めて返されます。

最後に一言

今回書いた3つって、使うときに混乱しますよね、、、
(私は初めて使ったときに混乱したので、こうして記事にしました、、、)