如何在 Next.js 中处理动态 url 路由？

在 Next.js 中处理动态 url 路由是一项常见的任务，特别是在构建动态内容的网站或应用程序时。在本文中，我们将介绍如何在 Next.js 中处理动态 url 路由，包括如何设置和访问动态路由参数。

什么是动态 url 路由？

动态 url 路由是指在 URL 中包含动态参数的路由。例如，一个博客网站可能有一个动态路由，用来显示特定文章的内容：

https://example.com/posts/123

其中“123”是动态参数，代表文章的 ID。在这个例子中，“posts”是固定的路由，而“123”是动态的路由参数。

如何设置动态 url 路由？

在 Next.js 中，你可以使用方括号“[]”来设置动态 url 路由。例如，下面的代码定义了一个动态路由，用于显示特定文章的内容：

// javascriptcn.com 代码示例
// pages/posts/[id].js

export default function Post({ post }) {
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
    </div>
  )
}

export async function getStaticPaths() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts')
  const posts = await res.json()

  const paths = posts.map(post => ({
    params: { id: post.id.toString() }
  }))

  return { paths, fallback: false }
}

export async function getStaticProps({ params }) {
  const res = await fetch(`https://jsonplaceholder.typicode.com/posts/${params.id}`)
  const post = await res.json()

  return {
    props: { post }
  }
}

在上面的代码中，“[id]”表示该路由是动态的，并且“id”是一个动态参数。当用户访问“/posts/123”时，Next.js 会自动将“123”作为参数传递给“getStaticProps”函数。

如何访问动态路由参数？

在 Next.js 中，你可以使用“useRouter”钩子来访问动态路由参数。例如，下面的代码演示了如何在页面组件中使用“useRouter”来访问动态路由参数：

// javascriptcn.com 代码示例
// pages/posts/[id].js

import { useRouter } from 'next/router'

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

  return (
    <div>
      <h1>Post {id}</h1>
      <h2>{post.title}</h2>
      <p>{post.body}</p>
    </div>
  )
}

在上面的代码中，我们使用“useRouter”钩子来获取“id”参数，并将其包含在页面内容中。

总结

在本文中，我们介绍了如何在 Next.js 中处理动态 url 路由。首先，我们了解了什么是动态 url 路由，并且学习了如何在 Next.js 中设置动态路由。然后，我们演示了如何使用“useRouter”钩子来访问动态路由参数。希望这篇文章能够帮助你更好地处理动态 url 路由，并构建出更加动态和丰富的网站和应用程序。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65719abed2f5e1655da4bedc