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, and you expect query to have route parameters in it, It is expected to have it empty during pre-rendering phase if your page is statically optimized by Automatic Static Optimization.

引用自documentation

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

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

可以像下面这样在useEffect中观看query；

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

useRouter - 查询对象为空

useRouter - query object is empty

next.js

next-router