useParams() 返回 null

Question

当我尝试在 nextjs 中调用 useParams() 钩子时，根据文档，它不应该为 null。

这是我的目录结构：

pages
├── [gameCode]
│   └── index.tsx

在index.tsx内，访问http://localhost:3001/ca850a（示例游戏代码）：

'use client'

import { useParams } from 'next/navigation';

const GameIndex = () => {

   const params = useParams();
   const gameCode = params.gameCode; // error here
   console.log(gameCode);

return(<div></div>)
}


export default GameIndex;

我得到一个错误，参数为空。

我尝试了多种方法，但没有一个有效。

Answer 1

如果您仍然使用页面路由器，您应该按照此处的文档来访问参数：https://nextjs.org/docs/pages/building-your-application/routing/dynamic-routes

import { useRouter } from 'next/router'
 
export default function Page() {
  const router = useRouter()
  return <p>Post: {router.query.slug}</p>
}