Logo

菜单

发布于 2026-01-06 10 阅读
0

Next.js Link 组件简介

Next.js Link 组件简介

作者：迈克尔·洪博

介绍

如果您曾开发过网站和应用程序，那么您很可能使用过一种常见的导航方法。传统上，导航通常使用 HTML 的锚元素（`<a> <a></a>`）。锚元素主要用于在网站和网页内部以及外部进行导航，并且它很好地完成了这项任务。

本文将介绍 Next.js 的 Link<Link/>组件，它提供了一种类似于原生锚元素的导航方式，但内置了更多优化功能。Next.js Link组件的优势在于，它可以通过 props 自定义导航行为，并提升性能和 SEO 指标。

我们将介绍以下步骤：

先决条件

要理解本文内容，你需要具备良好的 JavaScript 和 React 代码编写和理解能力。

  • 您还需要一个 Next.js 项目才能开始。请访问此处查看如何创建 Next.js 应用。
  • 接下来，npm install styled-components在终端运行命令安装 styled-components。本教程中我们将使用它来进行样式设置。

介绍该<Link/>组件

Link 组件为Next.js 应用提供了一种客户端导航方法。相比原生的锚点标签，Link 组件拥有许多内置功能，有助于提升应用性能和 SEO 排名，因此更推荐使用。这些功能包括预加载页面内容和更快的导航速度，因为路由是由 JavaScript 处理的。

此外，使用 Link 组件进行客户端导航不会涉及整个页面重新加载，这对于应用程序性能和用户体验来说非常重要。

Link 组件是从next/link核心模块导出的。以下是一个展示其用法的简单示例：

import Link from 'next/link'

function Home () {
    return (
        <>
            <h1> Visit our About page</>
            <Link href="/about"> About Us </Link>
        </>
    )
}

export default Home
Enter fullscreen mode Exit fullscreen mode

Link 组件属性

所需道具

href

Next.js Link组件需要一个必需的属性：href。

href指定要导航到的路径或 URL。这可以是绝对 URL、相对 URL 或 URL 对象。

绝对网址

<Link href="https://nextjs.org/docs"> Read the Docs </Link>
Enter fullscreen mode Exit fullscreen mode

相对网址

<Link href="/about"> About Us </Link>
Enter fullscreen mode Exit fullscreen mode

URL 对象

通过 URL 对象，我们可以使用传递给Next.js Link组件的字符串和参数来解析 URL。以下演示展示了如何在 Link 组件中使用它。

<Link
    href={{
      pathname: '/products',
      query: { product: '1' },
    }}
>
    <a>Search for product 1</a>
</Link>
Enter fullscreen mode Exit fullscreen mode

上述示例会将href值解析为：/products/?product=1。

可选道具

as

该as属性用于href动态路由。它指定一个链接装饰器，该装饰器提供有关 URL 的附加信息，这些信息可用于分析（例如广告和联盟计划）以及跟踪网页性能。

装饰器通常出现'?'在网页 URL 中的 `<link>` 标签之后，并且不会改变 URL 的目标地址。带有链接装饰器的 URL 示例为 `https://example.com/ 'http://www.refine.com/blog/article?referrer_source=newsletter'...

例子

pages在应用程序文件夹中创建新的文件夹和文件，使其结构如下所示：

📦pages
 ┣ 📂api
 ┃ ┗ 📜hello.js
 ┣ 📂products
 ┃ ┣ 📜index.js
 ┃ ┗ 📜[product].js
 ┣ 📜index.js
 ┗ 📜_app.
Enter fullscreen mode Exit fullscreen mode

接下来，将以下代码添加到pages/products/index.js：

import React from "react";
import Link from "next/link";

const ProductsList = () => {
  const productIDs = ["1", "2", "3"];
  return (
    <>
      <div>
        <h1>Products List</h1>
      </div>

      {productIDs.map((product, key) => (
        <Link
          href="/products/[product]"
          as={`products/${product}/?referrer_source=newsletter`}
          key={key}
        >
          <a>
            <h1>{product}</h1>
            <p>Learn more about product {product}</p>
          </a>
        </Link>
      ))}
    </>
  );
};

export default ProductsList;
Enter fullscreen mode Exit fullscreen mode

然后pages/products/[product].js，在代码中添加以下代码：

import React from 'react'
import Link from 'next/link'
import { useRouter } from 'next/router'

const Product = () => {
    const router = useRouter();
    const productID = router.query.product;
    return (
        <>
            <h1>
            <Link href='/products'><a>Go back to Products</a></Link>
            </h1>
            <div>
                <h5>Product {productID} Details Page</h5>
            </div>
            </>
  )
}

export default Product
Enter fullscreen mode Exit fullscreen mode

如果您导航到该页面，localhost:3000/products应该会看到如下所示的页面渲染效果：

产品描述

现在，如果您点击任何产品，您将被带到每个产品的详情页面，这是一个动态路径。

示例描述

在上面的演示中，我们可以看到每个产品的 URL 都包含一个链接装饰器，?referrer_source=newsletter但这不会影响链接的目标地址。

passHref

该passHref属性强制Next.js Link组件将该属性传递href给其子组件。当子组件</Link>是包装了锚标签（<a>）的自定义组件时，这一点尤为重要。

passHref在这种情况下，如果不添加该属性，将会损害搜索引擎优化和可访问性，因为<a>标签将缺少该href属性。该属性默认情况下处于禁用状态。

例子

将代码修改pages/products/index.js为以下内容：

  import React from "react";
  import Link from "next/link";
+ import styled from 'styled-components'


+ const CustomLink = styled.a`
+ color: red;
+ font-size: 30px;
+ `

const ProductsList = () => {
  const productIDs = ["1", "2", "3"];
  return (
    <>
      <div>
+        <NavLink href='/' name='Home'/>
        <h1>Products List</h1>
      </div>

      {productIDs.map((product, key) => (
        <Link
          href="/products/[product]"
          as={`products/${product}/?referrer_source=newsletter`}
          key={key}
        >
          <a>
            <h1>{product}</h1>
            <p>Learn more about product {product}</p>
          </a>
        </Link>
      ))}
    </>
  );
};

+ const NavLink = ({ href, name }) => {
+  return (
+    <Link href={href} passHref>
+      <CustomLink>{name}</CustomLink>
+    </Link>
+ )
+ };

export default ProductsList;
Enter fullscreen mode Exit fullscreen mode

现在，如果您导航到localhost:8000自定义红色链接，应该会显示如下内容：

自定义描述

prefetch

预加载页面内容可以显著提升应用程序性能。该prefetch属性允许在后台预加载页面，并且在 Next.js 的 Link 组件中默认启用。它仅在生产环境中有效，如果您希望禁用预加载，可以按如下方式进行配置：

<Link href='/products' prefetch={false}><a>Click me!</a></Link>
Enter fullscreen mode Exit fullscreen mode


GitHub 支持横幅

replace

replace 属性会改变导航的工作方式，它会替换当前的历史记录状态，而不是在堆栈中添加新的 URL。点击back浏览器导航栏中的按钮即可演示这一点。

请将内容编辑成pages/index.js以下形式：

import Head from "next/head";
import Image from "next/image";
import Link from "next/link";
import styles from "../styles/Home.module.css";

export default function Home() {
  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>Introduction to next/link</h1>
        <h1>
          <Link href='/products'>Go to products page</Link>
        </h1>
      </main>
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

页面应如下图所示：

首页描述

点击链接，观看下面的 GIF 动画，Go to products page看看在没有道具的情况下点击返回导航按钮时，应用程序的导航是如何工作的。replace

图像

接下来，找到包含以下代码的部分，并像这样将属性pages/products/index.js添加到其中：replace

... 

{productIDs.map((product, key) => (
        <Link
          href="/products/[product]"
          as={`products/${product}/?referrer_source=newsletter`}
          key={key}
+          replace={product === '3' ? true : false}
        >
          <a>
            <h1>{product}</h1>
            <p>Learn more about product {product}</p>
          </a>
        </Link>
      ))}
 ...
Enter fullscreen mode Exit fullscreen mode

现在让我们回到浏览器，看看如何使用replaceprop 实现导航。

图片替换

如上图所示，当我们访问产品 3 详情页面并点击返回导航按钮时，并没有返回产品页面，而是跳转到了首页。

scroll

默认情况下，使用 Link 组件点击链接会滚动到目标页面的顶部。也可以使用哈希 ID（URL 中 `<h1>` 之后的部分）滚动到新页面的特定部分。您可以通过设置Link 组件#来禁用默认行为或哈希 ID 。scroll={false}

禁用滚动到顶部

<Link href="/blog/intro" scroll={false}>
  <a>Disables scrolling to the top</a>
</Link>
Enter fullscreen mode Exit fullscreen mode

使用哈希 ID 滚动到网页中的特定部分

<Link href="https://refine.dev/blog/mui-datagrid-refine/#material-ui-datagrid-component">
  <a>Scroll to a specific section</a>
</Link>
Enter fullscreen mode Exit fullscreen mode

locale

该locale属性用于根据用户偏好的语言和地区，将用户导航到网页的不同版本。例如，我们可能有一个博客，英语用户和法语用户都会阅读，我们需要为英语用户渲染英文博客内容，为法语用户渲染法文博客内容。

i18n我们可以通过配置对象，为英语或法语用户提供他们首选语言的网页版本next.config.js。点击此处了解更多关于配置语言环境的信息。

shallow

这些props 允许我们在不运行任何 Next.js 数据获取方法（即 `get_page()`、`get_url ( )`或 `get_url()`）shallow的情况下更新当前页面的路径。更新后的路径及其与新 URL 的关联可以通过`useRouter`或`withRouter`提供的对象访问。getStaticPropsgetServerSidePropsgetInitialPropspathnamequeryrouter

这里有一个很好的例子，展示了如何在网页中使用浅路由。

结论

Next.js的 Link组件简化了客户端导航，我们建议在 Next.js 应用中使用它而不是原生的锚元素来进行路由。在本文中，您学习了如何使用Linkprops 来配置 Link 组件的行为以满足您的使用场景。您还学习了动态路由和 URL 对象等重要概念如何使用 Link 组件。

希望本文能帮助您快速上手 Next.js 中的 next/link 组件和客户端导航。您可以点击此处阅读Next.js Link组件文档，获取更多参考资料和信息。

**作者：Michael Hungbo**


Discord 横幅

构建基于 React 的 CRUD 应用程序，不受任何限制

现代 CRUD 应用程序需要从许多不同的来源获取数据，从自定义 API 到 Supabase、Hasura、Airtable 和 Strapi 等后端服务。

如果您对后端无关、无头框架感兴趣，并且希望借助内置提供程序和社区插件连接 15 个以上的数据源，那么可以了解一下refine 。


优化博客徽标

refine是一个基于 React 的开源框架，用于构建不受限制的 CRUD 应用程序。
它可以将开发速度提升高达3 倍，同时又不影响样式、自定义和项目工作流程的自由度。

refine从设计上就是无头的，它开箱即用地连接了30 多个后端服务，包括自定义 REST 和 GraphQL API。

访问refine GitHub 存储库以获取更多信息、演示、教程和示例项目。

文章来源：https://dev.to/refine/introduction-to-nextjs-link-component-1283
使用 JavaScript 的文本...
如何修复 MacBook 上的 4...