Next.js 是一个基于 React 的服务端渲染框架，提供了一些方便的工具和 API，使得前端开发变得更加简单快捷。在开发 Next.js 应用时，路由跳转是一个常见的需求。本文将介绍如何在 Next.js 中进行路由跳转，并提供详细的示例代码和指导意义。
基本路由跳转
Next.js 提供了一个 Link 组件，用于实现基本的路由跳转。使用 Link 组件，可以将页面链接转换为客户端路由链接，从而实现无需刷新页面的跳转。下面是一个简单的示例：
-- -------------------- ---- -------
------ ---- ---- ------------
-------- ------ -
------ -
-----
-------------
----- --------------
------------
-------
------
--
-
------ ------- -----在上面的示例中，我们通过 Link 组件将 /about 转换为客户端路由链接，然后使用 a 标签进行展示。当用户点击链接时，将会发生路由跳转。
编程式路由跳转
除了基本的路由跳转外，Next.js 还提供了一些 API，可以在代码中进行路由跳转。这种方式称为编程式路由跳转。下面是一个简单的示例：
-- -------------------- ---- -------
------ - --------- - ---- --------------
-------- ------ -
----- ------ - ------------
----- ----------- - -- -- -
----------------------
--
------ -
-----
-------------
------- ------------------------ -- --------------
------
--
-
------ ------- -----在上面的示例中，我们使用 useRouter 钩子获取了路由对象 router，然后在点击按钮时调用了 router.push 方法进行路由跳转。这种方式可以在需要进行条件跳转或者在回调函数中进行跳转时使用。
带参数的路由跳转
在实际开发中，我们经常需要将参数传递给下一个页面。Next.js 提供了两种方式来实现带参数的路由跳转：查询参数和动态路由。
查询参数
查询参数是一种将参数添加到 URL 中的方式，例如 /about?id=123。在 Next.js 中，可以使用 query 对象来获取查询参数。下面是一个简单的示例：
-- -------------------- ---- -------
------ ---- ---- ------------
-------- ------ -
------ -
-----
-------------
----- ---------------------
------------
-------
------
--
-
------ ------- -----在上面的示例中，我们将查询参数 id 添加到了链接中。在下一个页面中，可以使用 router.query.id 来获取查询参数的值。
动态路由
动态路由是一种将参数添加到 URL 中的方式，例如 /posts/123。在 Next.js 中，可以使用方括号来定义动态路由。下面是一个简单的示例：
-- -------------------- ---- -------
------ ---- ---- ------------
-------- ------ -
------ -
-----
-------------
----- ------------------ ----------------
------- -------
-------
------
--
-
------ ------- -----在上面的示例中，我们使用方括号来定义动态路由，然后使用 as 属性来指定实际的 URL。在下一个页面中，可以使用 router.query.id 来获取动态路由的参数值。
总结
在本文中，我们介绍了如何在 Next.js 中进行路由跳转。我们分别介绍了基本路由跳转、编程式路由跳转和带参数的路由跳转，并提供了详细的示例代码和指导意义。希望本文能够对你有所帮助，加快你在 Next.js 中开发的速度。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65dc24ff1886fbafa490f482