useRouter - 查询对象为空

Question

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

Answer 1

如果您的页面是动态路由，并且您希望其中query包含路由参数，并且您的页面通过自动静态优化进行静态优化，那么在预渲染阶段预计该路由参数为空。

引用自文档

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

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

可以观看query类似useEffect以下内容；

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