在 Web 应用中，浏览器前进后退功能是必不可少的。为了在 React 应用中实现此功能，我们可以使用 React Router，并结合 Redux 来管理路由状态。
React Router 4.0
React Router 4.0 是一个非常优秀的路由解决方案，它有着更加简单的 API，更高的性能，以及更好的可定制性。在 React Router 4.0 中，我们需要使用 BrowserRouter 来包裹整个应用，而不是之前的 Router 组件。同时，路由的设置也变得更加简洁清晰。这里是一个简单的示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------- -- ------- ------ ---- - ---- -------------------
----- ---- - -- -- --------------
----- ----- - -- -- ---------------
----- ------- - -- -- -----------------
----- --- - -- -- -
--------
-----
----
--------- -----------------------
--------- -----------------------------
--------- ---------------------------------
-----
--- --
------ ----- -------- ---------------- --
------ ------------- ----------------- --
------ --------------- ------------------- --
------
---------
--
------ ------- ----Redux
在 React 中，数据流的管理通常是使用 React 自带的状态来实现。但对于大型应用而言，这显然是不够的。Redux 提供了一种可预测的状态管理方案，它将应用的状态存储在一个单一的 Store 中，通过 Action 和 Reducer 来更新和修改状态。这种管理方式可以让应用状态更加清晰可控，避免了状态散落在多个组件的问题。
我们将使用 Redux 来管理路由状态。具体来说，我们将创建一个名为 routing 的 Reducer，来存储路由状态。它会包含三个属性：location（当前路由信息）、action（前进或后退）和 history（路由历史记录）。这里是示例代码：
-- -------------------- ---- -------
----- ------------ - -
--------- -----
------- -----
-------- --
--
----- ------- - ------ - ------------- ------- -- -
------ ------------- -
---- ---------------------------
------ -
---------
--------- ---------------
------- ---------------------
--
---- -----------------
------ -
---------
-------- ------------------ ---------------
--
---- -------------------
------ -
---------
-------- ---------------------- ---
--
--------
------ ------
-
--接下来，我们需要将这个 Reducer 和 React 应用连接起来。在应用的入口文件中，我们可以使用 react-redux 提供的 Provider 组件，将应用和 Redux Store 绑定起来。这里是一个示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - -------- - ---- --------------
------ - ------------ --------------- - ---- --------
------ - ------------- -- ------ - ---- -------------------
------ - ------------- - ---- ---------------------
------ --- ---- --------
------ ------- ---- ---------------------
----- ----------- - -----------------
--------
------- -------------
---
----- ----- - -------------------------
----------------
--------- --------------
--------
---- --
---------
------------
-------------------------------
--在这里，我们将 routing 和 routerReducer 两个 Reducer 组合成一个根 Reducer。同时，routerReducer 是 react-router-redux 中提供的路由状态的 Reducer，可以用于管理路由的状态信息。
实现前进后退功能
现在，我们已经完成了应用的基本设置，接下来就是实现前进后退功能。在 React Router 4.0 中，我们可以使用 withRouter 函数来获取路由信息，并使用 push 和 goBack 等函数来修改路由。为了实现前进后退，我们需要在每次路由变化时将路由信息保存到我们的 Reducer 中，并实现一个 history 数组来存储历史记录。这里是一个示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---------- - ---- -------------------
----- ----------- - -- -------- --------- ------------- -------------- -- -- -
----- -------- - -- -- -
-- --------------- - -- -
-----------------
---------------------- - ------------
- ---- -
--------------------
-
--
----- ----------- - -- -- -
-- --------------- - -- -
---------------------- - ---------------------------
-
--
-----------------------
------ -
-----
------- --------------------- -------------
------- ------------------------ ----------------
------
--
--
------ ------- ------------------------这里，我们使用了 withRouter 函数来获取 history 和 location，并且定义了两个函数 onGoBack 和 onGoForward 来实现前进后退。其中，onGoBack 函数首先弹出历史记录中的最后一个链接，并调用它的 goBack 函数。如果历史记录为空，则直接调用第一个链接的 goBack 函数。onGoForward 函数是由 history.push 函数触发的回调函数，它将当前路由地址添加到历史记录中。
最后，我们需要将这个组件与 Redux 连接起来，以便将路由操作保存到我们的 Reducer 中。这里是连接组件的代码：
-- -------------------- ---- -------
------ - ------- - ---- --------------
------ ----------- ---- ----------------
----- --------------- - ----- -- --
-------- ---------------------
---
----- ------------------ - -------- -- --
------------- -------- -- ----------
----- -----------------
-------- --------
---
--------------- -- -- ----------
----- ------------------
--
---
------ ------- --------
----------------
------------------
---------------在这里，我们使用了 redux 提供的 connect 函数来连接我们的组件和 Redux Store。同时，mapStateToProps 函数用于将 routing.history 映射到组件的 history 属性，从而使我们能够在组件中使用历史记录。mapDispatchToProps 函数用于将 addToHistory 和 popFromHistory 函数映射到组件的 props 中，以便在组件中调用他们。
总结
在本文中，我们通过使用 React Router 4.0 和 Redux，实现了浏览器前进后退功能。具体来说，我们使用 withRouter 函数获取路由信息，使用 history.push 和 goBack 函数实现前进后退，使用 Redux Reducer 存储路由状态和历史记录。这些技术的结合使得我们可以更好地管理路由状态，并且实现了 Web 应用中必不可少的前进后退功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64665d6e968c7c53b06f20d6