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

如果您的页面是 dynamic route ，你期望 query在其中包含路由参数，它是 预期 如果您的页面由 Automatic Static Optimization 静态优化，则在预渲染阶段将其清空.
引自 documentation

Pages that are statically optimized by Automatic Static Optimizationwill be hydrated without their route parameters provided, i.e querywill be an empty object ({}).

After hydration, Next.js will trigger an update to your application toprovide the route parameters in the query object.

可以观看 query在 useEffect喜欢以下;

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