链接与导航

Next.js 的路由器允许您在页面之间进行客户端路由跳转，类似于单页应用 (SPA) 的体验。

框架提供了一个名为 Link 的 React 组件来实现这种客户端路由跳转。

import Link from 'next/link'

function Home() {
  return (
    <ul>
      <li>
        <Link href="/">首页</Link>
      </li>
      <li>
        <Link href="/about">关于我们</Link>
      </li>
      <li>
        <Link href="/blog/hello-world">博客文章</Link>
      </li>
    </ul>
  )
}

export default Home

上面的示例使用了多个链接，每个链接都将路径 (href) 映射到已知页面：

/ → pages/index.js
/about → pages/about.js
/blog/hello-world → pages/blog/[slug].js

视口中的任何 <Link />（初始加载或通过滚动出现的）都会默认预获取页面资源（包括相关数据），这对于使用静态生成 (Static Generation) 的页面有效。而对于服务端渲染 (server-rendered) 的路由，相关数据仅在点击 <Link /> 时才会获取。

动态路径链接

您还可以使用插值来创建路径，这对于动态路由段 (dynamic route segments) 非常有用。例如，展示作为 prop 传递给组件的文章列表：

import Link from 'next/link'

function Posts({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>
          <Link href={`/blog/${encodeURIComponent(post.slug)}`}>
            {post.title}
          </Link>
        </li>
      ))}
    </ul>
  )
}

export default Posts

示例中使用 encodeURIComponent 是为了保持路径的 UTF-8 兼容性。

或者，使用 URL 对象：

import Link from 'next/link'

function Posts({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>
          <Link
            href={{
              pathname: '/blog/[slug]',
              query: { slug: post.slug },
            }}
          >
            {post.title}
          </Link>
        </li>
      ))}
    </ul>
  )
}

export default Posts

这里我们没有使用插值创建路径，而是在 href 中使用 URL 对象，其中：

pathname 是 pages 目录中的页面名称，本例为 /blog/[slug]
query 是包含动态段的对象，本例为 slug

注入路由器

示例

动态路由 (Dynamic Routing)

要在 React 组件中访问 router 对象，您可以使用 useRouter 或 withRouter。

通常我们推荐使用 useRouter。

命令式路由

示例

使用路由器 (Using Router)

next/link 应该能满足大多数路由需求，但您也可以在不使用它的情况下进行客户端导航，请参阅 next/router 文档。

以下示例展示如何使用 useRouter 进行基本页面导航：

import { useRouter } from 'next/router'

export default function ReadMore() {
  const router = useRouter()

  return (
    <button onClick={() => router.push('/about')}>
      点击此处阅读更多
    </button>
  )
}

浅层路由

示例

浅层路由 (Shallow Routing)

浅层路由允许您更改 URL 而不重新运行数据获取方法，包括 getServerSideProps、getStaticProps 和 getInitialProps。

您将通过 router 对象（由 useRouter 或 withRouter 添加）接收更新的 pathname 和 query，同时保持当前状态不变。

要启用浅层路由，请将 shallow 选项设为 true。参考以下示例：

import { useEffect } from 'react'
import { useRouter } from 'next/router'

// 当前 URL 是 '/'
function Page() {
  const router = useRouter()

  useEffect(() => {
    // 总是在首次渲染后执行导航
    router.push('/?counter=10', undefined, { shallow: true })
  }, [])

  useEffect(() => {
    // 计数器变化了！
  }, [router.query.counter])
}

export default Page

URL 将更新为 /?counter=10 但页面不会重新加载，只有路由状态会发生变化。

您也可以通过 componentDidUpdate 监听 URL 变化，如下所示：

componentDidUpdate(prevProps) {
  const { pathname, query } = this.props.router
  // 确认 props 已变化以避免无限循环
  if (query.counter !== prevProps.router.query.counter) {
    // 根据新查询获取数据
  }
}

注意事项

浅层路由仅适用于当前页面的 URL 变更。例如，假设我们有另一个页面 pages/about.js，然后执行：

router.push('/?counter=10', '/about?counter=10', { shallow: true })

由于这是一个新页面，即使我们要求浅层路由，当前页面也会卸载，加载新页面并等待数据获取。

当浅层路由与中间件 (middleware) 一起使用时，它不能像之前没有中间件时那样确保新页面与当前页面匹配。这是因为中间件能够动态重写，并且无法在不进行数据获取的情况下在客户端验证（浅层路由会跳过数据获取），因此必须始终将浅层路由变更视为浅层操作。

动态路径链接

注入路由器

命令式路由

浅层路由

注意事项

On this page