Next.js 是一个流行的 React 框架，主要用于构建 SSR（服务器渲染）应用程序。Next.js 提供了多种方式实现页面跳转，本文将详细介绍 Next.js 的页面跳转方式，并提供相应的示例代码，以帮助读者更好地掌握页面跳转的实现原理和应用。
基础跳转方式——Link 组件
Next.js 提供了一个专用于页面跳转的 Link 组件，它使用客户端路由实现跳转。使用 Link 组件，可以在不刷新整个页面的情况下切换路由，提高页面交互的效率。
Link 组件使用方法如下：
import Link from 'next/link'; <Link href="/about"> <a>About</a> </Link>
其中，href 属性传入跳转的页面路径，a 标签内的文字作为跳转文本。
服务端跳转——服务器端发送响应
有时候，在服务器端运行 JavaScript 时，需要在不显示其他页面的情况下将用户重定向到另一个页面。在 Next.js 中，可以使用 res.redirect() 服务器响应对象来实现服务端跳转。
-- -------------------- ---- -------
------ - --------- - ---- --------------
-------- ------- -
----- ------ - ------------
----- -------------- - -- -- -
------------------------
--
------ -
-----
--------- ---------
------- -----------------------------------------
------
--
-
------ ------- ------当用户单击 Contact 按钮时，将执行 handleRedirect 函数，该方法使用 router.push() 函数将用户路由重定向到 /contact。
客户端跳转——JavaScript 操作 DOM
在某些情况下，需要在组件内部执行页面跳转逻辑，比如表单提交、用户交互等。在 Next.js 中，可以使用 JavaScript 操作 DOM，通过设置 window.location.href 实现客户端跳转。
-- -------------------- ---- -------
------ - --------- - ---- --------------
-------- --------- -
----- ------ - ------------
----- ------------ - - -- -
-------------------
-----------------
--
------ -
----- ------------------------
------ ----------------------------
------ ----------- ----------- --------- -------- --
------- -----------------------------
-------
--
-
------ ------- --------在该示例中，当用户提交表单时，将执行 handleSubmit 函数，该方法使用 router.push() 函数将用户路由重定向到主页。
代码拆分——dynamic 组件
在 Next.js 中，可以通过动态加载模块的方式，在需要时才加载模块并执行相应的操作。使用 dynamic 函数可以帮助减小应用程序首屏加载的 JS 文件大小，提高页面加载速度和用户体验。
-- -------------------- ---- -------
------ ------- ---- ---------------
----- ---------------- - ---------- -- -------------------------------
-------- ------- -
------ -
-----
----------- ------- --------------
----------------- --
------
--
-
------ ------- ------上述代码中，使用 dynamic 函数动态加载组件，当需要加载组件时再执行相应的操作。
总结
本文介绍了 Next.js 的多种页面跳转方式，包括 Link 组件、服务端跳转、客户端跳转以及代码拆分中的 dynamic 组件。不同的跳转方式适用于不同的场景，开发者应根据实际需要选择并灵活运用这些技术。通过本文的学习，相信读者对 Next.js 页面跳转实现原理和应用方法有了更深入的了解和掌握。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6476aa78968c7c53b0352e64