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

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

![img](/mosaic-code.jpg)

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

![img](/mosaic-code.jpg)
結果☟
![スクリーンショット 2023-11-03 20.29.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/d3739ec6-c0e7-eb79-bb8e-63ef68645d94.png)


## Next.jsの場合
Next.jsでURLのパラメータを取得するには、useRouter()が使えます。
以下がサンプルコードになります。
「localhost://3000/books」の場合
![img](/mosaic-code.jpg)
結果☟
![スクリーンショット 2023-11-03 20.36.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/67bcaeba-b22a-e119-2273-fad96e525270.png)


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

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

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

## 最後に
他にも色々な記事を書いているので、よければ読んでいってください、、、

https://qiita.com/hukuryo/items/97797a91d7e2ee0bcabc

https://qiita.com/hukuryo/items/265c676d17fe21e75242

https://qiita.com/hukuryo/items/ebeb26823f944f143b11
[cv:issue_marketplace_engineer]

## はじめに
今回は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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/d3739ec6-c0e7-eb79-bb8e-63ef68645d94.png)


## Next.jsの場合
Next.jsでURLのパラメータを取得するには、useRouter()が使えます。
以下がサンプルコードになります。
「localhost://3000/books」の場合
```
const router = useRouter();
console.log(router);
```
結果☟
![スクリーンショット 2023-11-03 20.36.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/67bcaeba-b22a-e119-2273-fad96e525270.png)


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

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

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

## 最後に
他にも色々な記事を書いているので、よければ読んでいってください、、、

https://qiita.com/hukuryo/items/97797a91d7e2ee0bcabc

https://qiita.com/hukuryo/items/265c676d17fe21e75242

https://qiita.com/hukuryo/items/ebeb26823f944f143b11


はじめに

Reactの場合

続きを読むには単価診断を受けてください（30秒）