useRouter - 查询对象为空答案

【问题标题】：useRouter - query object is emptyuseRouter - 查询对象为空
【发布时间】：2021-06-28 17:58:43
【问题描述】：

我正在尝试在 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 只打印{}

【问题讨论】：

query 指的是 url 中的查询字符串。例如。 /yourTest?query=Hello。是我误解了什么，还是您忘记提供更多信息？
nextjs.org/docs/routing/dynamic-routes 根据文档查询引用localhost:3000/Hello 之类的参数（router.query 应该已经打印 { test: 'Hello' }）
没错，但是如果页面没有data fetching requirement，在预渲染过程中它将是一个空对象。可能是这样吗？
就是它！非常感谢

标签： next.js next-router

【解决方案1】：

如果您的页面是dynamic route，并且您希望query 中包含路由参数，那么如果您的页面经过静态优化，则预计在预渲染阶段将其设为空Automatic Static Optimization.

引用documentation

通过自动静态优化进行静态优化的页面将在没有提供路线参数的情况下进行补水，即查询将是一个空对象 ({})。

水合作用后，Next.js 将触发对您的应用程序的更新，以在查询对象中提供路由参数。

可以在useEffect中观看query，如下所示；

useEffect(() => {
  console.log(router.query);
}, [router.query]);

【讨论】：