Next.js - Linking and Navigating

在 Next.js 中，有两种方法可以在路由之间导航：
使用 Link 组件
使用 useRouter 钩子
本页将介绍如何使用 Link、useRouter() 并深入探讨导航的工作原理。

<Link> Component

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

您可以从 next/link 中导入该组件，并将 href prop 传递给该组件：

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

你还可以向 <Link> 传递其他可选option。

Linking to Dynamic Segments 链接到动态片段

在链接到动态片段时，您可以使用模板文字和插值法生成链接列表。例如，生成一个博客文章列表：

// app/blog/PostList.js
import Link from 'next/link'
 
export default function PostList({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>
          <Link href={`/blog/${post.slug}`}>{post.title}</Link>
        </li>
      ))}
    </ul>
  )
}

Checking Active Links

您可以使用 usePathname() 来确定链接是否处于活动状态。例如，要向活动链接添加一个类，可以检查当前路径名是否与链接的 href 匹配。

// app/ui/Navigation.js

'use client'
 
import { usePathname } from 'next/navigation'
import Link from 'next/link'
 
export function Navigation({ navLinks }) {
  const pathname = usePathname()
 
  return (
    <>
      {navLinks.map((link) => {
        const isActive = pathname === link.href
 
        return (
          <Link
            className={isActive ? 'text-blue' : 'text-black'}
            href={link.href}
            key={link.name}
          >
            {link.name}
          </Link>
        )
      })}
    </>
  )
}

Scrolling to an id

Next.js应用程序路由器的默认行为是滚动到新路线的顶部，或者保持滚动位置以进行前后导航。

如果你想在导航中滚动到特定的id，你可以在URL后面添加一个#哈希链接，或者只将一个哈希链接传递给href道具。这是可能的，因为<Link>渲染到<a>元素。

<Link href="/dashboard#settings">Settings</Link>
 
// Output
<a href="/dashboard#settings">Settings</a>

Disabling scroll restoration（禁用滚动恢复）

Next.js应用程序路由器的默认行为是滚动到新路线的顶部，或者保持滚动位置以进行前后导航。如果您想禁用此行为，可以将scroll={false}传递给<Link>组件，或者将scroll:false传递给router.push（）或router.replace（）。

// next/link
<Link href="/dashboard" scroll={false}>
  Dashboard
</Link>

// useRouter
import { useRouter } from 'next/navigation'
 
router.push('/dashboard', { scroll: false })

useRouter() Hook

使用useRouter() 可以通过编程更改路由。

Hook只能在客户端组件中使用，并从 next/navigation 中导入。

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

注意：

1. userRouter更多详情。
2.  除非您有使用 useRouter 的特殊要求，否则请使用 <Link> 组件在路由之间导航。

路由和导航的工作原理

应用程序路由器采用混合方法进行路由和导航。在服务器上，应用程序代码会自动按路由段进行代码拆分。而在客户端，Next.js 会预取并缓存路由段。这意味着，当用户导航到一个新路由时，浏览器不会重新加载页面，而只会重新呈现发生变化的路由段，从而改善导航体验和性能。
1. 预取
预取是一种在用户访问路线之前在后台预加载路线的方法。
在 Next.js 中，路由有两种预取方式：

2. 缓存

Next.js 有一个名为路由器缓存（Router Cache）的内存客户端缓存。当用户在应用中浏览时，预取路由段的 React 服务器组件有效载荷和访问过的路由都会存储在缓存中