前言
React-Router 是 React 生态圈中使用最广泛的路由库之一，它提供了强大的路由功能，方便我们构建单页应用和多页应用。而 Redux 则是 React 生态圈中最流行的状态管理库，它可以帮助我们更好地管理 React 应用中的状态。在本文中，我们将会介绍如何集成 React-Router 和处理路由，同时结合 Redux 管理状态，让我们的应用更加健壮和可维护。
环境准备
在开始本文之前，我们需要先准备好环境。我们需要安装 Node.js 和 npm，这里就不再赘述。然后，我们需要创建一个基于 create-react-app 的 React 项目，可以使用以下命令：
npx create-react-app my-app
安装完成后进入项目目录：
cd my-app
然后，我们需要安装 React-Router 和 Redux，可以使用以下命令：
npm install react-router-dom redux react-redux --save
集成 React-Router
首先，我们需要在应用中引入 React-Router。在 src 目录下创建一个名为 App.js 的文件，并添加以下代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------- -- ------- ------ ------ - ---- -------------------
----- --- - -- -- -
------ -
--------
--------
------ ----- -------- ---------------- --
------ ----- ------------- ----------------- --
------ ----- --------------- ------------------- --
------ -------------------- --
---------
---------
--
--
----- ---- - -- -- --------------
----- ----- - -- -- ---------------
----- ------- - -- -- -----------------
----- -------- - -- -- ------- --- -----------
------ ------- ----在上面的代码中，我们使用了 BrowserRouter 和 Switch 组件来管理路由，然后我们定义了三个路由组件：Home、About 和 Contact。如果用户访问未定义的路由，我们将会显示一个 404 页面。现在，我们可以启动应用并访问路由了：
npm start
在浏览器中访问 http://localhost:3000/，你应该看到 Home 页面。
处理路由
现在，我们已经可以使用 React-Router 来管理路由了。但是，在实际开发中，我们通常需要处理更多的路由逻辑，例如获取路由参数、判断当前路由等等。为了更好地处理路由，我们可以将路由相关的逻辑放到 Redux 中。
首先，我们需要定义一个路由 reducer，用于管理路由相关的状态。在 src 目录下创建一个名为 reducers.js 的文件，并添加以下代码：
-- -------------------- ---- -------
------ - --------------- - ---- ---------------------
----- ------------ - -
--------- -----
--
----- ------------- - ------ - ------------- ------- -- -
-- ------------ --- ---------------- -
------ -
---------
--------- ------------------------
--
-
------ ------
--
------ ------- --------------在上面的代码中，我们定义了一个名为 routerReducer 的 reducer，它可以根据不同的 action 类型来更新状态。当接收到 LOCATION_CHANGE action 时，我们将会更新 location 属性的值。
接下来，我们需要将路由 reducer 和 React-Router 集成。在 src 目录下创建一个名为 index.js 的文件，并添加以下代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - ------------ --------------- - ---- --------
------ - -------- - ---- --------------
------ - ------------- -- ------- ------ ------ - ---- -------------------
------ - -------------- ---------------- - ---- ---------------------
------ ------------- ---- -------------------------------
------ --- ---- --------
------ --------------
----- ------- - ----------------
----- ---------- - --------------------------
----- ----------- - -----------------
------- --------------
---
----- ----- - ------------
------------
----------------------------------- -- --------------------------------------
----------------------------
--
----------------
--------- --------------
------- ------------------
--------
------ ----- -------- --------------- --
------ ----- ------------- --------------- --
------ ----- --------------- --------------- --
------ -------------------- --
---------
---------
------------
--------------------------------
--在上面的代码中，我们首先创建了一个 history 对象，用于管理浏览器的历史记录。然后，我们使用 routerMiddleware 将 history 对象与 Redux 集成，这样我们就可以在 Redux 中处理路由相关的逻辑了。接着，我们定义了一个 rootReducer，将路由 reducer 添加到根 reducer 中。最后，我们创建了一个 store，并将其传递给 Provider 组件，这样我们的应用就可以使用 Redux 了。
Redux 实战
现在，我们已经可以在 Redux 中处理路由相关的逻辑了。例如，我们可以根据当前路由来更新应用的标题。在 src 目录下创建一个名为 Title.js 的文件，并添加以下代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
----- ----- - -- -------- -- -- -
--- ----- - --- -----
-- --------- -- ----------------- --- --------- -
----- - ------ ----
- ---- -- --------- -- ----------------- --- ----------- -
----- - -------- ----
-
------ -----------------
--
----- --------------- - ----- -- --
--------- ----------------------
---
------ ------- --------------------------------在上面的代码中，我们定义了一个名为 Title 的组件，并使用 connect 函数将其与 Redux 绑定。在组件中，我们根据当前路由来更新标题的内容。如果当前路由是 /about，我们将会显示 About Us，如果当前路由是 /contact，我们将会显示 Contact Us，否则我们将会显示默认的标题 My App。
现在，我们需要在应用中使用这个组件。在 App.js 文件中添加以下代码：
-- -------------------- ---- -------
------ ----- ---- ----------
----- --- - -- -- -
------ -
--
------ --
--------
--------
------ ----- -------- ---------------- --
------ ----- ------------- ----------------- --
------ ----- --------------- ------------------- --
------ -------------------- --
---------
---------
---
--
--在上面的代码中，我们将 Title 组件添加到了应用中，并将其放在了 Router 组件的外部。这样，我们就可以在整个应用中使用 Title 组件，并根据当前路由来更新标题了。
总结
在本文中，我们介绍了如何集成 React-Router 和处理路由，同时结合 Redux 管理状态。我们首先使用 React-Router 来管理路由，然后将路由相关的逻辑放到 Redux 中。最后，我们使用 Redux 来更新应用的标题。通过这篇文章的学习，我们可以更好地理解 Redux 的使用，同时也可以更好地处理路由相关的逻辑。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/656c43e6d2f5e1655d4a7f3a
