Next.js 中的路由配置详解-JavaScript中文网-JavaScript教程资源分享门户

在 Next.js 中，路由是非常重要的一部分。它决定了页面的访问路径，也影响着页面的渲染和数据获取。本文将详细介绍 Next.js 中的路由配置，包括路由的基本使用、动态路由、嵌套路由等内容。

路由的基本使用

在 Next.js 中，我们可以通过 Link 组件来实现页面之间的跳转。例如，我们要跳转到 /about 页面，可以这样写：

// javascriptcn.com 代码示例
import Link from 'next/link'

function HomePage() {
  return (
    <div>
      <Link href="/about">
        <a>About</a>
      </Link>
    </div>
  )
}

export default HomePage

这里，Link 组件的 href 属性指定了跳转的目标路径。注意，这里的路径是相对于应用根目录的路径，而不是相对于当前页面的路径。

如果我们需要在跳转时传递一些参数，可以通过 query 参数来实现。例如，我们要跳转到 /blog?id=123 页面，可以这样写：

// javascriptcn.com 代码示例
import Link from 'next/link'

function HomePage() {
  return (
    <div>
      <Link href="/blog?id=123">
        <a>Blog</a>
      </Link>
    </div>
  )
}

export default HomePage

在目标页面中，我们可以通过 useRouter 钩子来获取传递的参数。例如，我们要获取 /blog?id=123 中的 id 参数，可以这样写：

// javascriptcn.com 代码示例
import { useRouter } from 'next/router'

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

  return (
    <div>
      <h1>Blog {id}</h1>
    </div>
  )
}

export default BlogPage

这里，useRouter 钩子返回了一个 Router 对象，其中的 query 属性就是传递的参数。

动态路由

除了通过 query 参数传递参数，我们还可以通过动态路由来实现。动态路由是指在路径中使用占位符来表示参数，例如 /blog/[id]，其中的 [id] 就是占位符。

我们可以通过 getStaticPaths 或 getServerSideProps 方法来预先生成静态页面，或在每次请求时生成页面。例如，我们要生成 /blog/123 页面，可以这样写：

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

export async function getStaticPaths() {
  return {
    paths: [
      { params: { id: '123' } }
    ],
    fallback: false
  }
}

export async function getStaticProps({ params }) {
  return { props: { id: params.id } }
}

function BlogPage({ id }) {
  return (
    <div>
      <h1>Blog {id}</h1>
    </div>
  )
}

export default BlogPage

这里，getStaticPaths 方法返回了一个 paths 数组，其中包含了需要生成的所有页面的参数。fallback 属性指定了是否允许访问没有预先生成的页面，如果为 true，则会在访问时动态生成页面。

在页面中，我们可以通过 useRouter 钩子来获取动态路由中的参数。例如，我们要获取 /blog/123 中的 id 参数，可以这样写：

// javascriptcn.com 代码示例
import { useRouter } from 'next/router'

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

  return (
    <div>
      <h1>Blog {id}</h1>
    </div>
  )
}

export default BlogPage

嵌套路由

在 Next.js 中，我们可以使用嵌套路由来组织页面结构。嵌套路由是指在路径中使用多个占位符来表示参数，例如 /blog/[category]/[id]，其中的 [category] 和 [id] 都是占位符。

我们可以通过 getStaticPaths 或 getServerSideProps 方法来预先生成静态页面，或在每次请求时生成页面。例如，我们要生成 /blog/js/123 页面，可以这样写：

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

export async function getStaticPaths() {
  return {
    paths: [
      { params: { category: 'js', id: '123' } }
    ],
    fallback: false
  }
}

export async function getStaticProps({ params }) {
  return { props: { category: params.category, id: params.id } }
}

function BlogPage({ category, id }) {
  return (
    <div>
      <h1>Blog {category} {id}</h1>
    </div>
  )
}

export default BlogPage

在页面中，我们可以通过 useRouter 钩子来获取嵌套路由中的参数。例如，我们要获取 /blog/js/123 中的 category 和 id 参数，可以这样写：

// javascriptcn.com 代码示例
import { useRouter } from 'next/router'

function BlogPage() {
  const router = useRouter()
  const { category, id } = router.query

  return (
    <div>
      <h1>Blog {category} {id}</h1>
    </div>
  )
}

export default BlogPage

总结

本文详细介绍了 Next.js 中的路由配置，包括路由的基本使用、动态路由、嵌套路由等内容。希望本文能够对大家学习和使用 Next.js 有所帮助。

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