🚀

【小話】router.pushでrouter.queryが空になる件

2022/08/26に公開

あんまり気にしないでnext/routerを使っていたら、フロントエンドルーティングの時にブラウザ上のurlとnext/routerで取得する情報が異なってびっくりした。

router.push('/sample/apps', {
	query: {
	  limit: 100
	}
})

この時ブラウザ上にクエリパラメータは設定されているものの、router.queryでクエリパラメータを取得しようとすると{}が帰る。

Optional decorator for the path that will be shown in the browser URL bar.

ドキュメントをよく読むとrouter.pushの第一引数はStringかUrlObjectであり、第二引数はasなので、第二引数でクエリパラメータを指定してもブラウザ上の表記が変わるだけ。

見た目だけではなくnext/routerで取得する実態もqueryParameterが設定されているようにするには、正しくは第一引数にStringの場合には?key=valueで指定するか、UrlObjectを渡せば良い。