next.js - 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其中包含路由参数，并且如果您的页面通过Automatic Static Optimization进行了静态优化，则预计在预渲染阶段将其设置为空。

从文档中引用

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

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

可以query在useEffect下面观看；

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