从 Next.js 路由获取参数

在使用 Next.js 开发应用程序时，路由能够很方便地帮助我们管理页面。我们可以通过使用动态路由来创建具有动态参数的页面，并从路由中获取这些参数。

本文将介绍如何从 Next.js 路由中获取参数，并提供相关的代码示例。

获取 query 参数

在 Next.js 中，我们可以通过使用 query 对象来获取路由的查询参数。查询参数包括在 URL 中的以 ? 符号开始的键值对，例如 /posts?id=1 中的 id=1。

以下是一个简单的代码示例，展示如何在 Next.js 中获取查询参数：

import { useRouter } from 'next/router'

function Post() {
  const router = useRouter()
  const { id } = router.query

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

export default Post

在此代码示例中，我们从 useRouter 钩子中导入 router 对象，并使用 router.query 属性获取查询参数。在这个例子中，我们展示了从路由中获取 id 参数并将其用于页面标题。

获取动态路由参数

有时，我们可能需要从动态路由中获取参数。例如，在 /posts/[id].js 路径中，我们可以使用 id 参数动态渲染页面。

以下是一个使用 useRouter 钩子获取动态路由参数的示例：

import { useRouter } from 'next/router'

function Post() {
  const router = useRouter()
  const { id } = router.query

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

export default Post

在此代码示例中，我们调用 useRouter 钩子来获取当前路由信息。然后，我们使用 router.query 属性从路由中获取 id 参数，并将其用于页面标题。

结论

在本文中，我们介绍了如何从 Next.js 路由中获取查询参数和动态路由参数。通过学习这些技术，你可以更好地管理 Next.js 应用程序中的页面和路由。