<Link>

示例

<Link> 是一个扩展了 HTML <a> 元素的 React 组件，提供预加载 (prefetching) 和路由间的客户端导航功能。它是 Next.js 中在路由之间导航的主要方式。

import Link from 'next/link'

export default function Page() {
  return <Link href="/dashboard">Dashboard</Link>
}

import Link from 'next/link'

export default function Page() {
  return <Link href="/dashboard">Dashboard</Link>
}

属性

以下是 Link 组件可用的属性概览：

属性	示例	类型	必填
`href`	`href="/dashboard"`	字符串或对象	是
`replace`	`replace={false}`	布尔值	-
`scroll`	`scroll={false}`	布尔值	-
`prefetch`	`prefetch={false}`	布尔值	-

须知：<a> 标签的属性如 className 或 target="_blank" 可以作为属性添加到 <Link> 上，并会传递给底层的 <a> 元素。

`href` (必填)

要导航到的路径或 URL。

<Link href="/dashboard">仪表盘</Link>

href 也可以接受一个对象，例如：

// 导航到 /about?name=test
<Link
  href={{
    pathname: '/about',
    query: { name: 'test' },
  }}
>
  关于
</Link>

`replace`

默认为 false。 当为 true 时，next/link 会替换当前的历史记录状态，而不是在浏览器历史记录 (browser’s history) 栈中添加一个新 URL。

import Link from 'next/link'

export default function Page() {
  return (
    <Link href="/dashboard" replace>
      仪表盘
    </Link>
  )
}

import Link from 'next/link'

export default function Page() {
  return (
    <Link href="/dashboard" replace>
      仪表盘
    </Link>
  )
}

`scroll`

默认为 true。 <Link> 的默认行为是滚动到新路由的顶部，或在前进和后退导航时保持滚动位置。当为 false 时，next/link 在导航后不会滚动到页面顶部。

import Link from 'next/link'

export default function Page() {
  return (
    <Link href="/dashboard" scroll={false}>
      仪表盘
    </Link>
  )
}

import Link from 'next/link'

export default function Page() {
  return (
    <Link href="/dashboard" scroll={false}>
      仪表盘
    </Link>
  )
}

`prefetch`

默认为 true。 当为 true 时，next/link 会在后台预加载 href 指定的页面。这有助于提高客户端导航的性能。视口中（初始或通过滚动）的任何 <Link /> 都会被预加载。

通过传递 prefetch={false} 可以禁用预加载。预加载仅在生产环境中启用。

import Link from 'next/link'

export default function Page() {
  return (
    <Link href="/dashboard" prefetch={false}>
      仪表盘
    </Link>
  )
}

import Link from 'next/link'

export default function Page() {
  return (
    <Link href="/dashboard" prefetch={false}>
      仪表盘
    </Link>
  )
}

示例

链接到动态路由

对于动态路由，使用模板字面量创建链接路径会很方便。

例如，您可以生成指向动态路由 app/blog/[slug]/page.js 的链接列表：

app/blog/page.js

import Link from 'next/link'

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

中间件 (Middleware)

通常使用中间件 (Middleware) 进行身份验证或其他涉及将用户重写到不同页面的目的。为了使 <Link /> 组件能够正确预加载通过中间件重写的链接，您需要告诉 Next.js 要显示的 URL 和要预加载的 URL。这是为了避免不必要的中间件请求以了解正确的预加载路由。

例如，如果您想提供一个具有认证和访客视图的 /dashboard 路由，可以在中间件中添加类似以下内容以将用户重定向到正确的页面：

middleware.js

export function middleware(req) {
  const nextUrl = req.nextUrl
  if (nextUrl.pathname === '/dashboard') {
    if (req.cookies.authToken) {
      return NextResponse.rewrite(new URL('/auth/dashboard', req.url))
    } else {
      return NextResponse.rewrite(new URL('/public/dashboard', req.url))
    }
  }
}

在这种情况下，您需要在 <Link /> 组件中使用以下代码：

import Link from 'next/link'
import useIsAuthed from './hooks/useIsAuthed'

export default function Page() {
  const isAuthed = useIsAuthed()
  const path = isAuthed ? '/auth/dashboard' : '/dashboard'
  return (
    <Link as="/dashboard" href={path}>
      仪表盘
    </Link>
  )
}

版本历史

版本	变更
`v13.0.0`	不再需要子 `<a>` 标签。提供代码修改工具 (codemod) 来自动更新您的代码库。
`v10.0.0`	指向动态路由的 `href` 属性会自动解析，不再需要 `as` 属性。
`v8.0.0`	改进预加载性能。
`v1.0.0`	引入 `next/link`。

On this page