在使用 Next.js 时,如何在页面间传递状态和数据

阅读时长 9 分钟读完

前言

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 状态。

创建用户列表页面

-- -------------------- ---- -------
-- ------------------------

------ - ------------ ----------- - ---- --------------
------ - ---------- - ---- -------------------

------ ------- -------- ------- -
  ----- -------- - --------------
  ----- ----- - ------------------- -- -------------

  ----- --------------- - -- -- -----------------------

  ------ -
    -----
      ----- ------ ----- ---------
      ------- ------------------------------ --------------
      ----
        ----------------- -- -
          --- --------------
            ------ -------------
            -------- ---------------
          -----
        ---
      -----
    ------
  --
-

在这个例子中,我们使用 useSelectoruseDispatch 钩子函数来获取和分派状态。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

纠错
反馈