在前端开发中，路由和状态管理是非常重要的概念。React-router 和 Redux 是两个非常出名的库，用于管理路由和状态。但是，如何在React项目中集成这两个库并使用它们是一个相对麻烦的过程。这就是为什么出现了 jguddas-react-router-redux 这个 npm 包，它是一个集成了 React-router 和 Redux 的桥梁，可以简化这个过程。
安装和配置
首先，使用 npm 安装 jguddas-react-router-redux 包:
npm install --save jguddas-react-router-redux
在你的项目中，你需要创建一个 Redux store，可以使用 redux-thunk 来处理异步 actions:
-- -------------------- ---- -------
------ - ------------ --------------- - ---- -------
------ - -------- - ---- -------------
------ - ----------------------- ------------- - ---- ----------------------------
------ - ------ - ---- --------------
------ - ----- - ---- ------------------
------ ----- ---- -------------
------ - -------------------- - ---- ---------
------ -------- ---- ------------
----- ------- - ----------------------
----- ---------------- - -------------------------------
----- ----- - ------------
---------
--------------------------------- ------
-
----------------
--------- --------------
------- ------------------
------ --
---------
------------
-------------------------------
-在上面的代码中，我们首先创建了一个 browser history 对象，然后使用 createRouterMiddleware 创建中间件，最后使用 applyMiddleware 方法将中间件和 redux-thunk 应用到 store 上面。最后使用 Provider 组件和 Router 组件包裹我们的应用。
Link 使用
jguddas-react-router-redux 中的 Link 和 NavLink 组件和 React-router 中的 Link 和 NavLink 功能相同，但是它们会响应 Redux 的状态变化。
import { Link } from "jguddas-react-router-redux"
<Link to="/">Home</Link>路由参数
在 React-router 中，我们通常使用 this.props.match.params.* 来获取路由参数。但是在 jguddas-react-router-redux 中，我们需要使用 this.props.location.payload 来获取路由参数。
例如，假设我们有一个路由 /user/:id，我们可以在组件中获取参数 id 的方式如下：
class User extends React.Component {
render() {
const { id } = this.props.location.payload
return <div>User ID: {id}</div>
}
}我们也可以在 actions 中使用 push 方法来更新路由：
import { push } from "jguddas-react-router-redux"
export const viewUser = id => {
return dispatch => {
dispatch(push(`/user/${id}`))
}
}总结
通过使用 jguddas-react-router-redux，我们可以更容易地集成 React-router 和 Redux，并使用 Redux 状态来控制路由。我们可以使用 Link 和 NavLink 组件来处理链接，使用 this.props.location.payload 来获取路由参数，还可以使用 push 方法在 action 中更新路由。
完整示例代码：
-- -------------------- ---- -------
------ ----- ---- -------
------ -------- ---- -----------
------ - ------------ --------------- - ---- -------
------ - -------- - ---- -------------
------ - ----------------------- -------------- ---- - ---- ----------------------------
------ - ------ - ---- --------------
------ - ----- - ---- ------------------
------ ----- ---- -------------
------ - -------------------- - ---- ---------
------ -------- ---- ------------
----- ------- - ----------------------
----- ---------------- - -------------------------------
----- ----- - ------------
---------
--------------------------------- ------
-
----- --- ------- --------------- -
-------- -
------ -
-----
----
--------- -----------------------
--------- -----------------------------
--------- ----------------- -------------
--------- ----------------- -------------
-----
------ -------- ---------------- ----- --
------ ------------- ----------------- --
------ ---------------- ---------------- --
------
-
-
-
----- ---- - -- -- --------- ----------
----- ----- - -- -- ---------- ----------
----- ---- ------- --------------- -
-------- -
----- - -- - - ---------------------------
------ --------- --- ----------
-
-
----- --- ------- --------------- -
----------- - -- -- -
----------------------
-
-------- -
------ -
-----
------- ------------------------------- ---- ----------
------ -------- ---------------- ----- --
------ ------------- ----------------- --
------ ---------------- ---------------- --
------
-
-
-
----- ------------------ - -------- -- --
--------- -- -- ----------------------
--
------ ------- ------------- ------------------------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60057c2c81e8991b448ebbb0