React 是一种流行的前端框架，可以用于创建单页应用程序。在这样的应用程序中，路由控制是非常重要的，因为它允许用户在不刷新页面的情况下浏览不同的页面。React-Router-Redux 是一个流行的路由管理工具，它可以与 React 和 Redux 集成，提供强大的路由控制功能。在本文中，我们将详细介绍如何在 React 中使用 React-Router-Redux 实现路由控制。
安装 React-Router-Redux
首先，我们需要安装 React-Router-Redux。可以通过 npm 或 yarn 进行安装：
npm install react-router-redux --save
或者
yarn add react-router-redux
配置路由
在使用 React-Router-Redux 之前，我们需要配置路由。可以在应用程序的根组件中配置路由。以下是一个简单的示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - ------------ --------------- - ---- --------
------ - -------- - ---- --------------
------ - ------- ------ -------------- - ---- ---------------
------ - --------------------- ------------- - ---- ---------------------
------ --- ---- -------------------
------ ---- ---- --------------------
------ ----- ---- ---------------------
----- ----------- - -----------------
-------- -------------
---
----- ----- - -------------------------
----- ------- - ------------------------------------ -------
----------------
--------- --------------
------- ------------------
------ -------- ----------------
------ ----------- ---------------- --
------ ------------ ----------------- --
--------
---------
------------
-------------------------------
--在上面的代码中，我们首先导入了必要的库。然后，我们创建了一个根 reducer，它包含了一个名为 routing 的 reducer。我们使用 combineReducers 函数将根 reducer 与 routing reducer 组合在一起。
接下来，我们创建了一个 store，并将根 reducer 传递给它。然后，我们使用 syncHistoryWithStore 函数将 browserHistory 对象与 store 对象同步。最后，我们使用 ReactDOM.render 将根组件渲染到页面上。
在根组件中，我们使用 Router 组件来定义路由。我们定义了三个路由：/，/home 和 /about。/ 路由将渲染 App 组件，/home 路由将渲染 Home 组件，/about 路由将渲染 About 组件。
使用路由
现在我们已经配置了路由，我们可以在应用程序中使用它们。在 React 中，我们可以使用 Link 组件来创建链接，这些链接将导航到不同的路由。以下是一个示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---- - ---- ---------------
----- --- - -- -------- -- -- -
-----
----
--------- ---------------------------
--------- -----------------------------
-----
----------
------
--
------ ------- ----在上面的代码中，我们首先导入了 Link 组件。然后，我们定义了一个名为 App 的组件，它包含了一个链接列表和一个 children 属性。链接列表中包含了两个链接：/home 和 /about。当用户点击这些链接时，他们将被导航到相应的路由。
使用 Redux 控制路由
使用 React-Router-Redux，我们可以将路由状态存储在 Redux store 中，并使用 Redux 控制路由。以下是一个示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
------ - ---- - ---- ---------------------
----- ---- - -- --------------- -- -- -
-----
-------------
------- ---------------------------- -- --------------
------
--
----- ------------------ - -------- -- --
---------------- -- -- ------------------------
---
------ ------- ------------- --------------------------在上面的代码中，我们首先导入了 connect 和 push 函数。然后，我们定义了一个名为 Home 的组件，它包含了一个按钮和一个 navigateToAbout 属性。当用户点击按钮时，我们将使用 push 函数将路由导航到 /about。
最后，我们使用 connect 函数将 navigateToAbout 属性与 Redux store 进行连接。这使我们能够在组件中使用 Redux 控制路由。
结论
React-Router-Redux 是一个非常有用的库，它可以帮助我们实现强大的路由控制功能。在本文中，我们详细介绍了如何在 React 中使用 React-Router-Redux 实现路由控制。我们介绍了如何配置路由，如何使用路由，以及如何使用 Redux 控制路由。希望这篇文章对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6778b6b7c1c5215e3cc8d387