在 Web 应用程序开发过程中，页面跳转是一个必不可少的功能。Next.js 是一个基于 React 的服务端渲染框架，可以大大提高页面加载速度和 SEO，同时还提供了一些强大的功能来处理页面跳转。
本文将介绍 Next.js 中如何处理页面跳转，包括常见的跳转方式、跳转时传递数据和其他注意事项。
跳转方式
Next.js 提供了两种常见的页面跳转方式：客户端跳转和服务端跳转。
客户端跳转
客户端跳转是指通过 JavaScript 来实现的跳转方式。在 Next.js 中，可以通过 next/router 模块来实现客户端跳转。
-- -------------------- ---- -------
------ - --------- - ---- -------------
-------- ------ -
----- ------ - -----------
-------- ------------- -
---------------------
-
------ -
-----
-----------------
------- ------------------------------------
------
-
-
------ ------- ----这里的 router.push('/about') 就是客户端跳转到 /about 页面的代码。
服务端跳转
服务端跳转是指在服务器端发起的跳转，会直接将用户重定向到新的页面。在 Next.js 中，可以使用 next/router 模块中的 replace 方法来实现服务端跳转。
-- -------------------- ---- -------
------ - --------- - ---- -------------
-------- ------- -
----- ------ - -----------
-------- ------------- -
-- ----------
-------------------
-
------ -
-----
--------------
------- ------------------------------------
------
-
-
------ ------- -----这里的 router.replace('/') 就是服务端跳转到首页的代码，即用户登录成功后跳转到首页。
跳转时传递数据
在实际应用中，需要在页面跳转时传递一些数据。Next.js 提供了两种方式来传递数据：URL 查询参数和 state 属性。
URL 查询参数
在客户端跳转时，可以通过 URL 查询参数来传递数据。例如：
-- -------------------- ---- -------
------ - --------- - ---- -------------
-------- ------ -
----- ------ - -----------
-------- ------------- -
-------------
--------- ---------
------ - ----- ------ -
--
-
------ -
-----
-----------------
------- ------------------------------------
------
-
-
------ ------- ----这里的 /about?name=jack 就是传递了一个 name 参数的跳转链接。
在接收页面中，可以通过 next/router 模块中的 useRouter 钩子获取 URL 查询参数。
-- -------------------- ---- -------
------ - --------- - ---- -------------
-------- ------- -
----- ------ - -----------
----- - ---- - - ------------
------ -
-----
--------- -----------
------
-
-
------ ------- -----这里的 name 就是从 URL 查询参数中获取的数据。
state 属性
在服务端跳转时，可以通过 state 属性来传递数据。例如：
-- -------------------- ---- -------
------ - --------- - ---- -------------
-------- ------- -
----- ------ - -----------
-------- ------------- -
-- ------------------
----------------
--------- ----
------ - --------- ------ -
--
-
------ -
-----
--------------
------- ------------------------------------
------
-
-
------ ------- -----这里的 { username: 'jack' } 就是传递的数据，可以在首页中通过 router.asPath 获取到。
-- -------------------- ---- -------
------ - --------- - ---- -------------
-------- ------ -
----- ------ - -----------
------ -
-----
----------- -----------------------------------
------
-
-
------ ------- ----注意事项
在使用 Next.js 进行页面跳转时，需要注意以下几点：
- 不要在
getInitialProps中使用异步代码，否则会造成页面无法跳转。 - 服务端跳转时不能传递函数或 React 组件等需要序列化的数据。
结语
本文介绍了 Next.js 中如何处理页面跳转，包括常见的跳转方式、跳转时传递数据和其他注意事项。在实际开发中，页面跳转是一个必不可少的功能，希望本文能够对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67824779935627c900002c34
