前言
Next.js 是一款基于 React 的服务端渲染框架，它为我们提供了一种更加灵活的方式来构建 React 应用程序，使得我们可以更加高效地生成静态页面和动态页面，同时还支持自定义配置和开箱即用的能力。 在进行页面跳转时，我们经常会遇到需要在不同页面之间传递数据的情况，例如通过一个表单提交数据到另一个页面进行处理，或者从一个组件更新状态并将其传递给另一个页面。在这篇文章中，我们将讨论一些在 Next.js 中传递状态和数据的方法。
查询参数传递数据
什么是查询参数？
查询参数是一种将数据传递到网址的方法。它们通常包含在地址栏的 URL 参数中，并由问号“?”隔开。查询参数通常出现在 GET 请求中，并允许我们从客户端向服务器发送数据。在 Next.js 应用中，我们可以使用查询参数将数据从一个页面传递到另一个页面。
如何在路由中传递数据
Next.js 提供了一种非常简单的方法来从一个页面传递数据到另一个页面，即通过路由。具体而言，我们可以在一个页面中定义一个动态路由，然后使用路由对象将数据传递给另一个页面。
例如，我们在通用页面（如 /pages/users/[id].js 页面）上创建一个动态路由[id]，并指定 getServerSideProps 函数为获取用户数据。
-- ----------------------- ------ - --------- - ---- -------------- ------ ------- -------- ------ - ----- ------ - ------------ ----- - -- - - ------------- ------ -------- --------- - ------ ----- -------- --------------------------- - ----- - ------- ---- --- - - -------- ----- ---- - ----- ----------------------------------------------------------------- ----- ---- - ----- ------------ ------ - ------ - ---- - -- -
上述代码中，我们使用 useRouter 钩子函数导入了 Next.js 内置的路由对象，然后从中提取出路由参数 id。路由参数本质上就是查询参数，通过它可以在页面间传递数据。
在 getServerSideProps 函数中，我们通过 fetch 方法从一个假的 API 中取出一个具有相应 id 的用户数据并将其保存在 user 属性中。然后，我们将这个 user 属性作为必要数据传递给路由的目标页面。这样，我们可以在目标页面上获取这个数据然后使用它渲染页面。
-- -----------------------
------ - --------- - ---- --------------
------ ------- -------- ------ ---- -- -
----- - --- ----- ----- - - -----
----- ------ - ------------
------ -
-----
-------- --------
-------- ----------
--------- -----------
------- ----------- -- ------------------------------------
------
--
-
------ ----- -------- --------------------------- -
----- - ------- ---- --- - - --------
----- ---- - ----- -----------------------------------------------------------------
----- ---- - ----- ------------
------ - ------ - ---- - --
-在目标页面中，我们通过 props 对象来接收从上一个页面传递过来的数据，并在渲染页面时使用它。这样就完成了页面间的数据传递，router.push 函数可以帮助我们返回到导航页面中。
状态管理传递数据
什么是状态管理？
状态管理是一种将应用程序的状态与 UI 同步的方法。它为应用程序提供了一种一致的方式来管理数据和状态。在 Next.js 应用中，我们可以使用单个全局状态管理器来管理整个应用程序的状态。状态管理库通常包含一些工具和 API 用来帮助我们管理数据和状态。
Redux 状态管理
Redux 作为一种类型化、单向数据流的状态管理库，被广泛应用于 React 应用程序中。它为应用程序提供了一种保存整个应用程序状态的集中式存储方案，并且允许我们在不同组件之间共享状态和数据。在 Next.js 应用中，我们通常使用相应的接口和插件来将 Redux 集成到应用程序中。
下面是一个简单的 Redux 应用程序的例子。在本例中，我们将创建一个包含 users 数组的状态，并在页面中渲染出来。另外，我们还会编写一个 Redux Action 来从 API 加载数据并更新 users 状态。
创建用户列表页面
-- ------------------------
------ - ------------ ----------- - ---- --------------
------ - ---------- - ---- -------------------
------ ------- -------- ------- -
----- -------- - --------------
----- ----- - ------------------- -- -------------
----- --------------- - -- -- -----------------------
------ -
-----
----- ------ ----- ---------
------- ------------------------------ --------------
----
----------------- -- -
--- --------------
------ -------------
-------- ---------------
-----
---
-----
------
--
-在这个例子中，我们使用 useSelector 和 useDispatch 钩子函数来获取和分派状态。users 状态通过 useSelector 函数来提取，而 fetchUsers 动作是通过使用 useDispatch 函数来进行分派的。在页面中，当用户单击“Load Users”按钮时，我们会触发一个动作来从 API 中获取数据。
创建 Redux Action
-- --------------------
------ ----- ---------- - -- -- ----- ---------- -- -
--- -
----- ---- - ----- ----------------------------------------------------
----- ----- - ----- ------------
----------
----- --------------
-------- ------
---
- ----- ------- -
---------------------
-
--在这个例子中，我们定义了一个名为 fetchUsers 的动作生成器函数。这个函数使用异步函数语法（async/await）来获取数据并交给 Redux store 进行管理。当数据获取成功时，我们会将数据保存到 Redux store 的 users 属性中，然后通过 Redux 中的 dispatch 函数将 action 对象传递给 Reducer。
创建 Redux Reducer
-- ---------------------
----- ------------ - ---
------ ------- -------- ------------------ - ------------- ------- -
------ ------------- -
---- --------------
------ ---------------
--------
------ ------
-
-在这个例子中，我们定义了一个名为 usersReducer 的 Redux reducer，它接收 state 和 action 并返回相应的 state。当传递的 action 匹配上了 'FETCH_USERS' 类型时，我们将获取到的用户数据放入状态中。
添加 Redux 配置
我们还需要编写一个 Redux store，用来存储所有的用户数据。
-- ------------------ ------ - ------------ --------------- - ---- -------- ------ --------------- ---- -------------- ------ ------------ ---- -------------------- ----- ---------- - --------------------------------- ----- ----- - ------------------------- ------------ ------ ------- ------
最后，在 Next.js 应用程序中，我们需要将 Redux store 添加到应用程序中。
-- -----------------
------ - -------- - ---- --------------
------ ----- ---- -----------
-------- ------- ---------- --------- -- -
------ -
--------- --------------
---------- -------------- --
-----------
--
-
------ ------- ------这样，我们就完成了在 Next.js 应用程序中使用 Redux 实现状态管理和数据传递。
结论
在本文中，我们介绍了 Next.js 中在页面间传递状态和数据的几种方法。我们首先了解了如何通过查询参数在页面之间传递数据，然后介绍了如何通过 Redux 进行状态管理来在不同组件之间共享数据。希望本文可以对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6708d7bad91dce0dc874a8a3