时间戳

首页 > 解决方案 > NextJS获取url参数一开始就返回空

next.js - NextJS获取url参数一开始就返回空

问题描述

我想在页面的开头获取 URL 参数，但首先它返回空，一段时间后

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

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

如何在不返回空结果的情况下获取 URL 参数？

标签： next.js

解决方案

根据docs，useRouter来自的钩子next/router返回一个 prop isReady，您可以检查它。

isReady: boolean- 路由器字段是否在客户端更新并准备好使用。应该只在 useEffect 方法内部使用，而不是在服务器上进行有条件的渲染。

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

推荐阅读