NextJS获取url参数时一开始返回空

Question

我想在页面开头获得URL参数，但首先它返回空，过了一会儿

const rout = useRouter()
useEffect(() => {
console.log('queries:')
console.log(rout.query)
}, [rout])

第一次返回{}，但是在渲染之后，它返回{'myparam': 'blabla'}

如何获得URL参数而不返回空结果?

Answer 1

根据文档，next/router的useRouter钩子返回一个道具isReady，您可以检查。

isReady:boolean-路由器字段是否在客户端更新可以使用了。应该只在useEffect方法和不能在服务器上有条件地呈现。

const rout = useRouter()
useEffect(() => {
if (rout.isReady) {
//rout.query will be ready here
}
}, [rout])