🍣
next/router isReadyがtrueになってから描画させる
やりたかったこと
- router.queryでクエリパラメータを取得したい
- ↑は初期ロード時に値がundefinedになる
- isReadyの値がtrueになってから取得・描画すれば解決する
生じた問題
router.isReadyを直接参照する以下の例でエラーが出る。
Warning: Expected server HTML to contain a matching <div> in <div>.
ダメな例
export const Hoge = () => {
const router = useRouter()
const { data } = router.query
return <>{router.isReady && <Inner data={data} />}</>
}
解決策
/hoge?data=abc
にアクセスするとして、パラメータを取得してからレンダリングさせたい場合、以下のように実装する必要がある。
export const Hoge = () => {
const router = useRouter()
const { data } = router.query
const [display, setDisplay] = useState(false)
useEffect(() => {
if (router.isReady) {
setDisplay(true)
}
}, [router.isReady])
return <>{display && <Inner data={data} />}</>
}
Discussion