在 Next.js 中使用 useRouter 访问查询参数时出错

Question

我在尝试使用 useRouter 挂钩访问 Next.js 13 中的查询参数时遇到问题。当我运行以下代码时

'use client'
import { useRouter } from 'next/navigation';


const Post = () => {
    const router = useRouter();  
    
    return (
        <div>
            post number : {router.query.id}
        </div>

  )
}

export default Post

我收到以下错误：

未处理的运行时错误

类型错误：router.query 未定义

来源

  25 |   return (
  26 |       <div>
> 27 |           post number : {router.query.id}
     |                         ^
  28 |       </div>
  29 | 
  30 | )

我从官网Routing:Dynamic Routes获取代码，

你可以看这里

我将其记录在控制台中以查看变量路由器内部的内容，我得到这个

Answer 1

我得到的答案是它对我有用（获取 URL 参数）

我在尝试使用 Next.js 中应用程序目录内的useRouter钩子访问查询参数时遇到了该问题。next/router参考Next.js文档后

当您尝试使用应用程序目录内的 next/router 中的 useRouter 挂钩时，也可能会发生这种情况，因为 next/navigation 中的 App Router 的 useRouter 与页面中的 useRouter 挂钩具有不同的行为。

要解决此问题，您可以使用包useParams中的钩子next/navigation。该钩子提供了一种获取 URL params的解决方案，无需依赖 useRouter。

以下是成功访问查询参数的修改后的代码示例：

'use client'
import { useParams } from 'next/navigation';

const Post = () => {
  const { id } = useParams();

  return (
    <div>
      Post number: {id}
    </div>
  );
}

export default Post;

通过使用useParams，您可以直接解构id路由中的参数并在组件中使用它。

请记住，示例代码假设您使用的是最新版本的 Next.js (v13.4.6)。