👌

[React, Next.js]URLパラメータを取得

2023/11/08に公開

はじめに

今回はReactとNext.jsでURLの情報を取得する方法を書いていきます。

Reactの場合

ReactでURLのパラメータを取得するには、「useLocation()」が使えます。
まずは、「react-router-dom」をインストールしてください。

npm install react-router-dom

以下がサンプルコードになります。
「localhost://3000/Favorite」の場合

const location = useLocation();
console.log(location);

結果☟
スクリーンショット 2023-11-03 20.29.41.png

Next.jsの場合

Next.jsでURLのパラメータを取得するには、useRouter()が使えます。
以下がサンプルコードになります。
「localhost://3000/books」の場合

const router = useRouter();
console.log(router);

結果☟
スクリーンショット 2023-11-03 20.36.53.png

参考

参考にしたドキュメントです。

https://reactrouter.com/en/main/hooks/use-location

https://nextjs.org/docs/pages/api-reference/functions/use-router

Discussion