Sponsor
ntab.devntab.dev 提升效率的新标签页组件
点击查看
Menu

链接和导航

在 Next.js 中有四种在路由之间导航的方式:

本页将介绍如何使用这些选项,并深入探讨导航的工作原理。

<Link> 是一个内置组件,它扩展了 HTML 的 <a> 标签,提供了预获取和路由之间的客户端导航功能。它是 Next.js 中在路由之间导航的主要和推荐方式。

你可以通过从 next/link 导入它,并向组件传递 href 属性来使用它:

app/page.tsx
TypeScript
import Link from 'next/link'
 
export default function Page() {
  return <Link href="/dashboard">Dashboard</Link>
}

你还可以向 <Link> 传递其他可选属性。更多信息请参阅 API 参考

useRouter() 钩子

useRouter 钩子允许你在客户端组件中以编程方式更改路由。

app/page.tsx
TypeScript
'use client'
 
import { useRouter } from 'next/navigation'
 
export default function Page() {
  const router = useRouter()
 
  return (
    <button type="button" onClick={() => router.push('/dashboard')}>
      Dashboard
    </button>
  )
}

有关 useRouter 方法的完整列表,请参阅 API 参考

**推荐:**使用 <Link> 组件在路由之间导航,除非你有使用 useRouter 的特定需求。

redirect 函数

对于服务器组件,请使用 redirect 函数。

app/team/[id]/page.tsx
TypeScript
import { redirect } from 'next/navigation'
 
async function fetchTeam(id: string) {
  const res = await fetch('https://...')
  if (!res.ok) return undefined
  return res.json()
}
 
export default async function Profile({
  params,
}: {
  params: Promise<{ id: string }>
}) {
  const id = (await params).id
  if (!id) {
    redirect('/login')
  }
 
  const team = await fetchTeam(id)
  if (!team) {
    redirect('/join')
  }
 
  // ...
}

值得注意的是:

  • redirect 默认返回 307(临时重定向)状态码。当在 Server Action 中使用时,它返回 303(See Other)状态码,这通常用于在 POST 请求后重定向到成功页面。
  • redirect 内部会抛出错误,因此应该在 try/catch 块之外调用。
  • redirect 可以在渲染过程中在客户端组件中调用,但不能在事件处理程序中调用。你可以使用 useRouter 钩子代替。
  • redirect 也接受绝对 URL,可用于重定向到外部链接。
  • 如果你想在渲染过程之前重定向,请使用 next.config.jsMiddleware

更多信息请参阅 redirect API 参考

使用原生 History API

Next.js 允许你使用原生的 window.history.pushStatewindow.history.replaceState 方法来更新浏览器的历史记录,而无需重新加载页面。

pushStatereplaceState 调用集成到 Next.js Router 中,允许你与 usePathnameuseSearchParams 同步。

window.history.pushState

使用它向浏览器的历史记录堆栈添加新条目。用户可以导航回到前一个状态。例如,对产品列表进行排序:

'use client'
 
import { useSearchParams } from 'next/navigation'
 
export default function SortProducts() {
  const searchParams = useSearchParams()
 
  function updateSorting(sortOrder: string) {
    const params = new URLSearchParams(searchParams.toString())
    params.set('sort', sortOrder)
    window.history.pushState(null, '', `?${params.toString()}`)
  }
 
  return (
    <>
      <button onClick={() => updateSorting('asc')}>Sort Ascending</button>
      <button onClick={() => updateSorting('desc')}>Sort Descending</button>
    </>
  )
}
'use client'
 
import { useSearchParams } from 'next/navigation'
 
export default function SortProducts() {
  const searchParams = useSearchParams()
 
  function updateSorting(sortOrder) {
    const params = new URLSearchParams(searchParams.toString())
    params.set('sort', sortOrder)
    window.history.pushState(null, '', `?${params.toString()}`)
  }
 
  return (
    <>
      <button onClick={() => updateSorting('asc')}>Sort Ascending</button>
      <button onClick={() => updateSorting('desc')}>Sort Descending</button>
    </>
  )
}

window.history.replaceState

使用它替换浏览器历史记录堆栈上的当前条目。用户无法导航回上一个状态。例如,切换应用程序的语言环境:

'use client'
 
import { usePathname } from 'next/navigation'
 
export function LocaleSwitcher() {
  const pathname = usePathname()
 
  function switchLocale(locale: string) {
    // e.g. '/en/about' or '/fr/contact'
    const newPath = `/${locale}${pathname}`
    window.history.replaceState(null, '', newPath)
  }
 
  return (
    <>
      <button onClick={() => switchLocale('en')}>English</button>
      <button onClick={() => switchLocale('fr')}>French</button>
    </>
  )
}
'use client'
 
import { usePathname } from 'next/navigation'
 
export function LocaleSwitcher() {
  const pathname = usePathname()
 
  function switchLocale(locale) {
    // e.g. '/en/about' or '/fr/contact'
    const newPath = `/${locale}${pathname}`
    window.history.replaceState(null, '', newPath)
  }
 
  return (
    <>
      <button onClick={() => switchLocale('en')}>English</button>
      <button onClick={() => switchLocale('fr')}>French</button>
    </>
  )
}

路由和导航的工作原理

App Router 使用混合方法进行路由和导航。在服务器上,你的应用程序代码会根据路由段自动代码分割。而在客户端,Next.js 会预获取缓存路由段。这意味着,当用户导航到新路由时,浏览器不会重新加载页面,只有变化的路由段会重新渲染——这改善了导航体验和性能。

1. 代码分割

代码分割允许你将应用程序代码分成更小的包,以供浏览器下载和执行。这减少了每个请求的数据传输量和执行时间,从而提高性能。

服务器组件允许你的应用程序代码按路由段自动进行代码分割。这意味着在导航时只加载当前路由所需的代码。

2. 预获取

预获取是在用户访问之前在后台预加载路由的一种方式。

在 Next.js 中有两种预获取路由的方式:

  • <Link> 组件:当路由在用户视口中可见时,会自动预获取。预获取在页面首次加载或通过滚动进入视图时发生。
  • router.prefetch()useRouter 钩子可用于以编程方式预获取路由。

<Link> 的默认预获取行为(即当 prefetch 属性未指定或设置为 null 时)取决于你对 loading.js 的使用。只有共享布局,沿着渲染的"组件树"直到第一个 loading.js 文件,会被预获取并缓存 30s。这降低了获取整个动态路由的成本,并且意味着你可以显示即时加载状态,为用户提供更好的视觉反馈。

你可以通过将 prefetch 属性设置为 false 来禁用预获取。或者,你可以通过将 prefetch 属性设置为 true 来预获取加载边界之外的完整页面数据。

更多信息请参阅 <Link> API 参考

值得注意的是:

  • 预获取在开发环境中不启用,仅在生产环境中启用。

3. 缓存

Next.js 有一个内存中的客户端缓存,称为路由缓存。当用户在应用程序中导航时,预获取的路由段和访问过的路由的 React Server Component Payload 存储在缓存中。

这意味着在导航时,缓存会尽可能地被重用,而不是向服务器发出新请求——通过减少请求数量和数据传输来提高性能。

了解更多关于路由缓存如何工作以及如何配置它。

4. 部分渲染

部分渲染意味着在导航时只有在客户端更改的路由段重新渲染,而任何共享段都被保留。

例如,当在两个兄弟路由 /dashboard/settings/dashboard/analytics 之间导航时,settings 页面将被卸载,analytics 页面将以新状态挂载,而共享的 dashboard 布局将被保留。这种行为也存在于同一动态段上的两个路由之间,例如使用 /blog/[slug]/page 并从 /blog/first 导航到 /blog/second

部分渲染的工作原理

如果没有部分渲染,每次导航都会导致整个页面在客户端重新渲染。只渲染发生变化的段减少了数据传输量和执行时间,从而提高性能。

5. 软导航

浏览器在页面之间导航时执行"硬导航"。Next.js App Router 启用了页面之间的"软导航",确保只有更改的路由段才会重新渲染(部分渲染)。这使得客户端 React 状态在导航过程中得以保留。

6. 前进和后退导航

默认情况下,Next.js 将在后退和前进导航时维护滚动位置,并在路由缓存中重用路由段。

7. 在 pages/app/ 之间的路由

当从 pages/ 增量迁移到 app/ 时,Next.js 路由器将自动处理两者之间的硬导航。为了检测从 pages/app/ 的转换,有一个客户端路由器过滤器,它利用应用路由的概率检查,这偶尔会导致误报。默认情况下,这种情况应该非常罕见,因为我们将误报可能性配置为 0.01%。可以通过 next.config.js 中的 experimental.clientRouterFilterAllowedRate 选项自定义此可能性。需要注意的是,降低误报率将增加客户端包中生成的过滤器的大小。

或者,如果你更喜欢完全禁用此处理并手动管理 pages/app/ 之间的路由,可以在 next.config.js 中将 experimental.clientRouterFilter 设置为 false。当禁用此功能时,页面中与应用路由重叠的任何动态路由默认都无法正确导航。