React Router 和 Redux 都是开发 React 应用必不可少的工具。React Router 是用来处理页面路由的，而 Redux 是用来做状态管理的。然而，当把它们集成在一起使用的时候，可能会出现一些冲突。本文将介绍如何处理 React Router v4 和 Redux 集成的冲突，并提供代码示例。
问题描述
在使用 React Router 和 Redux 的过程中，可能会出现以下问题：
- 路由切换时，Redux 的状态并没有被更新。
- 在路由组件中使用 Redux 的 connect 高阶组件会导致路由参数变化时组件没有重新渲染。
- 在路由组件中使用 withRouter 高阶组件会导致路由参数变化时组件没有重新渲染。
解决方案
下面将介绍如何解决上述问题。
问题一：路由切换时，Redux 的状态并没有被更新
这个问题是因为，React Router 和 Redux 是两个独立的工具，它们并不知道彼此的存在。因此，需要将它们集成在一起，才能让它们共同工作。
需要做的就是在路由组件中手动 dispatch 一个 action 来更新 Redux 的状态。可以使用 React Router 提供的 withRouter 高阶组件，来获取路由参数。示例代码如下：
------ ------ - --------- - ---- --------
------ - ---------- - ---- -------------------
------ - ------- - ---- --------------
------ - ---------- - ---- ------------
----- ----------- ------- --------- -
------------------- -
----- - -------- - - -----------
----- - -- - - ------------------------
-------------------------
-
-------- -
-- ---
-
-
------ ------- -----------------------------------在 componentDidMount 方法中，使用 this.props.match.params 来获取路由参数。然后，手动 dispatch 一个 action 来更新 Redux 的状态。
问题二：在路由组件中使用 Redux 的 connect 高阶组件会导致路由参数变化时组件没有重新渲染
这个问题是因为，当路由参数变化时，路由组件的 props 会发生变化，但是由于 connect 高阶组件的缓存机制，导致组件没有重新渲染。
可以使用 React Router 提供的 key 属性来强制让组件重新渲染。key 属性的值需要随着路由参数的变化而变化。代码示例如下：
------ ------ - --------- - ---- --------
------ - ------- - ---- --------------
------ - ---------- - ---- ------------
----- ----------- ------- --------- -
------------------- -
----- - -------- - - -----------
----- - -- - - ------------------------
-------------------------
-
-------- -
-- ---
-
-
------ ------- -----------------------使用 withRouter 高阶组件为组件提供路由相关的 props。然后，在路由组件中使用 key 属性来让组件强制重新渲染：
------ ------ - --------- - ---- --------
------ - ---------- - ---- -------------------
------ ----------- ---- ----------------
----- ------- ------- --------- -
-------- -
----- - -- - - ------------------------
------ -
------------ -------- --
--
-
-
------ ------- --------------------问题三：在路由组件中使用 withRouter 高阶组件会导致路由参数变化时组件没有重新渲染
这个问题和问题二类似，也是因为 withRouter 高阶组件的缓存机制导致的。可以和问题二一样，使用 key 属性来让组件强制重新渲染，代码示例如下：
------ ------ - --------- - ---- --------
------ - ---------- - ---- -------------------
------ - ------- - ---- --------------
------ - ---------- - ---- ------------
----- ----------- ------- --------- -
------------------- -
----- - -------- - - -----------
----- - -- - - ------------------------
-------------------------
-
-------- -
-- ---
-
-
------ ------- -----------------------------------
----- ------- ------- --------- -
-------- -
----- - -- - - ------------------------
----- --------------------- - ------------------------
------ -
---------------------- -------- --
--
-
-
------ ------- --------同样使用 key 属性让组件强制重新渲染。需要注意的是，需要先将 withRouter 高阶组件和 connect 高阶组件合并，再使用 key 属性来让组件强制重新渲染。
结论
使用 React Router 和 Redux 可以让我们更方便地开发 React 应用。但是在使用它们的过程中，需要注意它们之间的集成问题。上面介绍的三个问题是最常见的问题。通过使用 withRouter 高阶组件和 key 属性，可以解决这些问题。希望本文对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6722ebe42e7021665e0d7aed