在 Next.js 中，页面跳转是一个非常基本且必要的功能，能够让用户更好地浏览我们的应用。本文将为大家讲解 Next.js 中如何进行页面跳转。
跳转方式
Next.js 中提供了两种跳转方式：
- 客户端跳转：通过改变浏览器的 URL 地址实现跳转。这种方式的好处是跳转后不需要向后台重新发送请求，页面加载速度快，用户体验较好。常用
<Link>和router.push方法实现。 - 服务端跳转：在后台进行跳转，并重新渲染页面后返回给浏览器。这种方式的好处是对 SEO 有一定的优化作用，通常用于需要在服务端渲染的时候。常用
router.replace和router.back方法实现。
客户端跳转
使用客户端跳转时，可以使用 Next.js 提供的<Link>标签或router.push方法实现。
<Link>标签
在 Next.js 中，<Link>是一个重要的组件，用于生成具备 CSR（Client-side Render，客户端渲染）功能的链接。其使用方式如下所示：
<Link href="/about"> <a>About Us</a> </Link>
在上述代码中，我们使用了<Link>组件，并指定了跳转的目标地址/about，并将其包裹在<a>标签中，从而生成具有跳转功能的链接。
需要注意的是，Next.js 中的<Link>组件并不是一个普通的 HTML 标签，而是一个 React 组件。因此，需要先引入组件，然后才能使用它：
-- -------------------- ---- -------
------ ---- ---- -----------
-------- ------ -
------ -
-----
----- --------------
-------- ------
-------
------
-
-
------ ------- ----router.push方法
另一个常用的客户端跳转方式是使用router.push方法。这个方法是 Next.js 内置的路由器对象router的方法之一，用于实现客户端端路由跳转。使用方式如下所示：
-- -------------------- ---- -------
------ - --------- - ---- -------------
-------- ------ -
----- ------ - -----------
----- ----------- - ------- -- -
----------------------
---------------------
-
------ -
-----
-- ------------- ----------------------
----- --
----
------
-
-
------ ------- ----在上述代码中，我们先使用useRouter钩子函数获取到路由对象router，然后定义了一个点击事件handleClick。在点击事件中，我们阻止了默认链接跳转行为，并调用了router.push方法实现了客户端路由跳转。
服务端跳转
使用服务端跳转时，可以使用 Next.js 提供的router.replace和router.back方法实现。
router.replace方法
使用router.replace方法可以实现服务端跳转。该方法的特点是：在跳转后，当前页面的历史记录会被覆盖，因此，用户无法使用回退按钮返回到之前的页面。使用方式如下所示：
-- -------------------- ---- -------
------ - --------- - ---- -------------
-------- ------ -
----- ------ - -----------
----- ----------- - ------- -- -
----------------------
------------------------
-
------ -
-----
------- --------------------------- -----------
------
-
-
------ ------- ----在上述代码中，我们定义了一个点击事件handleClick，在该事件中，我们调用了router.replace方法实现了服务端跳转。
router.back方法
使用router.back方法可以实现返回到上一个页面。使用方式如下所示：
-- -------------------- ---- -------
------ - --------- - ---- -------------
-------- ------- -
----- ------ - -----------
----- ----------- - ------- -- -
----------------------
-------------
-
------ -
-----
------- ------------------------ -------------
------
-
-
------ ------- -----在上述代码中，我们定义了一个点击事件handleClick，在该事件中，我们调用了router.back方法实现了返回到上一个历史页面。
总结
本文通过介绍 Next.js 中的客户端跳转和服务端跳转两种方式，让大家可以更好地掌握 Next.js 中的页面跳转技巧。希望本篇技术文章能对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648c0dad48841e9894a5a3f4