介绍
React 是一种用于构建用户界面的 JavaScript 库，而 Redux 则是一种 JavaScript 状态管理器。在 React 应用中，Redux 帮助我们管理应用程序的状态。在这篇文章中，我们将学习如何在 React 应用程序中使用 Redux 实现路由控制。
为什么需要路由控制？
路由是 Web 应用程序中的重要部分，它负责将用户从一个页面导航到另一个页面。在 React 中，路由可以帮助我们管理应用程序的不同视图，并有效地组织我们的代码。
但是，在传统的 React 应用程序中，使用 React Router 等路由库对应用程序的路由进行管理可能有些过于复杂，因为它需要在应用程序中集成许多库，并使用多个组件实例来管理路由。
通过在 React 应用程序中使用 Redux，我们可以在不添加过多复杂度的情况下进行路由控制，并将路由状态与应用程序的其他状态分开管理。
如何使用 Redux 进行路由控制
安装 Redux 和 React Router
在开始使用 Redux 进行路由控制之前，需要安装 react-router-dom，react-redux 和 redux。
$ npm install react-router-dom react-redux redux --save
创建路由组件
在开始编写我们的路由控制代码之前，我们需要创建一个基本的路由布局，这里我们将使用 react-router-dom 提供的 BrowserRouter 和 Switch 组件。
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------------- ------ - ---- -------------------
----- --- ------- --------------- -
-------- -
------ -
---------------
----------- ----------- ------------
----------------
--
-
-
------ ------- ----创建路由 Action 和 Reducer
我们需要创建一个路由 reducer 来管理我们的应用程序的路由状态。一个路由状态通常包括当前路由的路径和参数。 在我们的应用程序中，我们可以将路由状态保存为一个对象。 我们将把路由 reducer 保存在一个单独的文件中，并将其放在 reducers 目录中。
在此之前，我们需要定义一些路由 actions，以便我们的路由 reducer 能够响应这些 action。当应用程序路由发生变化时，redux store 将分配给 reducer。 reducer 将根据传递给它的操作来处理状态的更新。
-- -------------------- ---- -------
-- --------------
------ ----- ------------ - ---------------
-- ----------
------ - ------------ - ---- ----------------
------ -------- ----------------- -
------ - ----- ------------- -------- - ---- - --
-
-- ----------
------ - ------------ - ---- ----------------
----- ------------ - -
----- ---
------- --
--
-------- ------------------ - ------------- ------- -
------ ------------- -
---- -------------
----- ------ ---------- - -------------------------------
------ - ----- ------ --
--------
------ ------
-
-
------ ------- -------------添加路由中间件
在这一步中，我们需要添加路由中间件，以便应用程序能够正确处理路由。 我们将使用 react-router-dom 提供的 Route 和 withRouter 组件。
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------------- ------- ------ ---------- - ---- -------------------
------ - ------- - ---- --------------
------ - ----------- - ---- -------------------------
----- --- ------- --------------- -
------------------- -
----- - --------- ---- - - --------------------
-----------------------------
-
----------------------------- -
----- - --------- ------- - - --------------------
----- - --------- ------- - - -------------------
-- -------- --- -------- -
--------------------------------
-
-
-------- -
------ -
---------------
--------
------ ----- -------- ------------- -- ---------------- --
------ ----- ------------- ------------- -- ----------------- --
---------
----------------
--
-
-
----- ------------------ - -
-----------
--
------ ------- ------------------------ --------------------------使用路由状态
当用户导航到另一个页面或路由变化时，我们的应用程序将更新路由状态。我们将使用 connect 函数将路由状态映射到我们的组件中。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
----- ----------- ------- --------------- -
-------- -
----- - ----- ------ - - -----------------
------ -
-----
--------- -----------
----------------
----
------------------- ------ -- -
--- ------------------------
---
-----
------- ----------- -- -----------------------------------
-- -- ----- ----
---------
------
--
-
-
----- --------------- - ----- -- --
------ -----------
---
------ ------- --------------------------------------结论
我们已经完成了在 React 应用程序中使用 Redux 进行路由控制的指南。通过使用 Redux，我们有效地管理了应用程序的路由状态，并使我们的代码更易于管理和维护。 推荐将此方法用于 React 应用程序的开发中，以更好地管理路由并将应用程序的状态组织在一起。
参考资料
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/676fd2b7e9a7045d0d7721c6