⚓
next routerでqueryを渡す際に、URLに表記させない
import { useRouter } from 'next/router'
export default function ReadMore({ post }) {
const router = useRouter()
return (
<button
type="button"
onClick={() => {
router.push({
pathname: '/hoge',
query: { id: post.id },
},'/hoge') // 第二引数(as)で上書きする
}}
>
Click here to read more
</button>
)
}
上記の例で、/hoge
に遷移させる際に、query id
をURLに表示させたくない場合は、第二引数の as
を使うことで表記を /hoge
のように上書きすることができる。
見た目上上書きされているだけなので
router.query.id
でidは取得可能。
ただし
/hoge?id=999
のようなURLを直接叩かれた場合は、表記は変更されず、queryも通常通り取得可能。
もしケース毎に何か対策を施したい場合は
router.asPath
の値を参照して分岐に利用することで回避はできそう。
Discussion