如何解决useRouter - 查询对象为空
我正在尝试在 Next.JS 中学习路由,但我无法获得查询对象。
文件路径:./src/pages/[test]/index.tsx
import { useRouter } from 'next/router';
export default function Test() {
const router = useRouter();
console.log(router.query);
return (
<div>
<h1>Test</h1>
</div>
)
}
console.log
只打印 {}
解决方法
如果您的页面是 dynamic route,并且您希望 query
在其中包含路由参数,则预期在预渲染阶段将其设为空,如果您页面由 Automatic Static Optimization 静态优化。
通过自动静态优化进行静态优化的页面 将在没有提供路由参数的情况下被水化,即查询 将是一个空对象 ({})。
hydration 后,Next.js 将触发对您的应用程序的更新以 在查询对象中提供路由参数。
可以像下面这样观看query
中的useEffect
;
useEffect(() => {
console.log(router.query);
},[router.query]);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。