🛣️
【Next.js】useRouterを使ってURLのパスやパラメータを取得する
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つって、使うときに混乱しますよね、、、
(私は初めて使ったときに混乱したので、こうして記事にしました、、、)
Discussion