概要
Nextjs のrouting を使ってdynamic routing を行う時
localhost:3000/items/1
に対してid == 1 のitems を表示するページを
作る際、
pages/items/[id].js
を用意することで、dynamic routing が可能です。
この時のidの取得で undefined が出て少しハマったので備忘録として書いておきます。
問題だったこと
この時、localhost:3000/items/1 から id となる 1 を
取得する時のコードは簡単には以下のようにかけます。
pages/items/[id].js
import React from 'react'
import { useRouter } from "next/router"
import { useState, useEffect } from "react"
function Pages(){
const router = useRouter()
const [itemId, setItemId] = useState()
useEffect(() => {
const {id} = router.query
setItemId(id)
}, [router])
return(
<div>{itemId}</div>
)
}
このような疑似コードですが、
useEffect で id を取得するはずでしたが、userId はundefined となっていました。
解決策
useEffect の条件を、router から router.isReady へと変更すると安定して取得できるようになりました。
useEffect(() => {
const {id} = router.query
setItemId(id)
}, [router.isReady])
まとめ
今回は、簡単ではありましたが、
自分がNextjs のrouting を使っていて少しハマってしまったことについて
備忘録的にまとめてみました。
細かいところでしたが、あまり調べた時に出てくる記載が少なかったため、
この記事を誰か見て問題が解決できることを願っております。
今回はこの辺で。