简介
rrrouter-provider-history 是一个 React Router v4 的 history provider。它使用 HTML5 的 history API 来实现无刷新页面跳转的前端路由。
安装
可以通过 npm 来安装 rrrouter-provider-history:
npm install --save rrrouter-provider-history
使用
在 React 项目中使用 rrrouter-provider-history，需要先设置 Provider：
-- -------------------- ---- -------
------ - ------ - ---- ------------------
------ - -------------------- - ---- ---------
------ - -------- - ---- ---------------------------
----- ------- - ----------------------
----------------
--------- ------------------
--------
---- --
---------
------------
-------------------------------
-在上面的代码中，我们使用 createBrowserHistory 来创建 history 对象，并将其作为 prop 传递给 Provider。我们用 React Router v4 的 Router 来包裹整个应用，并在 Provider 内部使用。
在组件中获取当前的路由信息：
-- -------------------- ---- -------
------ ----- ---- -------
------ - ------------ - ---- ---------------------------
----- ----------- ------- --------------- -
-------- -
----- - ------ --------- ------- - - ----------
------ -
-----
---------- -----------------------
------- ----------- -- --------------------------- ----- -----------
------
-
-
-
------ ------- -------------------------在上面的代码中，我们使用 withRRRouter 来获取 match, location, history 等参数。我们通过 location.pathname 来获取当前的路由路径，并使用 history.push 来实现跳转。
示例
-- -------------------- ---- -------
------ ----- ---- -------
------ - ------- ------ ----- ------ - ---- ------------------
------ - -------------------- - ---- ---------
------ - --------- ------------ - ---- ---------------------------
----- ------- - ----------------------
----- ---- - -- -- -------------
----- ----- - -- -- --------------
----- ----------- - -- --------- ------- -- -- -
-----
---------- -----------------------
------- ----------- -- --------------------------- ----- -----------
------
-
----- ----------------------- - -------------------------
----- --- - -- -- -
--------- ------------------
--------
-----
-----
----
----
----- ------------------
-----
----
----- ------------------------
-----
-----
------
--- --
------------------------ --
--------
------ ----- -------- ---------------- --
------ ------------- ----------------- --
---------
------
---------
-----------
-
-------------------- --- --------------------------------在上面的示例中，我们展示了如何在组件中使用 withRRRouter 来获取 location 和 history 参数。我们使用 history.push 来实现跳转。除此之外，我们还展示了 Router, Route, Link 和 Switch 的用法。
总结
rrrouter-provider-history 是一个很棒的 React Router v4 的 history provider，它可以实现 React 前端路由的跳转。我们可以通过它来获取当前路由的信息和跳转路由。在使用它的时候，需要先在 Provider 中设置 history 对象，并在组件中使用 withRRRouter 来获取 location 和 history 等参数。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600557ff81e8991b448d51eb