什么是 @kentomoriwaki/react-router-redux4？
@kentomoriwaki/react-router-redux4 是一个前端技术栈中用来处理路由和状态管理的 npm 包，它结合了 react-router 和 redux 进行开发，可以帮助我们更方便地管理应用程序的路由和状态。
安装
使用 npm 或 yarn 进行安装：
--- ------- ---------------------------------- ------
或者
---- --- ----------------------------------
使用
在我们的应用程序中，我们需要使用 react-redux 的 Provider 组件来将 store 注入到我们的应用程序中。而 @kentomoriwaki/react-router-redux4 中使用的路由则是 React Router v4，所以我们也需要安装并导入该组件到我们的应用程序中。具体导入方式如下：
------ ----- ---- --------
------ -------- ---- ------------
------ - -------- - ---- --------------
------ - ------------- - ---- -------------------
------ - ------------ --------------- - ---- --------
------ -------------------- ---- -------------
------ -------- ---- -------------
------ ----- ---- ----------
------ --- ---- -------------------
----- -------------- - -----------------------
----- ----- - ------------
---------
-------------------------------
--
--------------------------
----------------
--------- --------------
---------------
---- --
----------------
------------
-------------------------------
--在我们的代码中，我们首先创建了一个 sagaMiddleware 中间件实例，让它和 redux createStore 方法一起使用。然后将 sagaMiddleware 实例传递给 applyMiddleware 方法，通过 applyMiddleware 方法将 sagaMiddleware 注入到我们的 store 中。最后，我们将 Provider 组件和 BrowserRouter 组件进行嵌套，将 store 注入到我们的应用程序中。
接下来，我们需要结合 react-router 和 redux 中的 connect 方法，并使用 @kentomoriwaki/react-router-redux4 的 ConnectedRouter 组件 以及 routerReducer 和 routerMiddleware 两个中间件来处理我们的路由和状态。具体使用方式如下：
实现路由的控制
------ ----- ---- --------
------ - ----- - ---- -------------------
------ - --------------- - ---- -------------------------------------
------ - --------------- - ---- --------
------ - ------- - ---- --------------
------ - -------------------- - ---- ----------
------ - -------------- ---------------- - ---- -------------------------------------
------ ---- ---- --------------------
------ ----- ---- ---------------------
------ -------- ---- ------------------------
----- ------- - -----------------------
----- -------- - -----------------
------- -------------
---
----- ---------- - --------------------------
----- --- - -- -------- -- -- -
-----
------ --------
-----
----
----
----- ------------------
-----
----
----- ------------------------
-----
-----
------
--- --
------ ----- -------- ---------------- --
------ ------------- ----------------- --
------------------ --- --- -- --------- ---------- ---
------ -------- -------------------- --
------
--
----- --------------- - ------- -- --
--------- ---------------------
---
------ ------- ------------------------------在我们的代码中，我们首先创建了一个浏览器路由的实例 history，然后在 combineReducers 方法中使用 routerReducer，将路由状态添加到我们的 store 中。
接下来，我们调用 routerMiddleware 方法来创建一个路由中间件，让 history 实例能够和 push、replace 等方法进行结合使用，处理我们的路由事件。
最后，我们将 ConnectedRouter 组件和 App 组件进行嵌套，使用 connect 方法将组件和 store 进行连接，并采用 redux 的高阶技术在组件内部控制路由。
值得注意的是，如果我们需要使用 NavLink 组件、withRouter 方法等，所有需要使用到历史记录、地址栏等浏览器 API 的组件都需要被 ConnectedRouter 组件进行包装。
实现路由的重定向
------ ----- ---- --------
------ - ------ -------- - ---- -------------------
------ - --------------- - ---- -------------------------------------
------ - --------------- - ---- --------
------ - ------- - ---- --------------
------ - -------------------- - ---- ----------
------ - -------------- ---------------- - ---- -------------------------------------
------ ---- ---- --------------------
------ ----- ---- ---------------------
------ -------- ---- ------------------------
----- ------- - -----------------------
----- -------- - -----------------
------- -------------
---
----- ---------- - --------------------------
----- --- - -- -------- -- -- -
-----
------ --------
-----
----
----
----- ------------------
-----
----
----- ------------------------
-----
-----
------
--- --
------ ----- -------- ---------------- --
------ ------------- ----------------- --
------------------ --- --- -- --------- ---------- ---
------ -------- -------------------- --
------
--
----- --------------- - ------- -- --
--------- ---------------------
---
------ ------- ------------------------------在我们的代码中，我们在 Route 组件的下方添加了如下一行代码：
------------------ --- --- -- --------- ---------- ---
这行代码的含义是：如果当前路径是 /，则重定向到 /home。
总结
@kentomoriwaki/react-router-redux4 是一个npm包，它可以协助我们更好地管理应用程序的路由和状态。使用 @kentomoriwaki/react-router-redux4 我们可以使用 React Router v4 和 redux 状态管理的同时，还可以使用 connect 方法、ConnectedRouter 组件和 routerReducer、routerMiddleware 中间件等等强大功能，让我们可以更加灵活、可控制和可扩展地管理我们的应用程序。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600573c081e8991b448e9b50