什么是 history-with-raw-location？
history-with-raw-location 是一个基于 react-router history 库的增强版，它扩展了 history 的 API，增加了两个方法 pushWithRawLocation 和 replaceWithRawLocation，用于方便的在应用程序中进行无缝的页面跳转。
如何使用 history-with-raw-location？
安装
首先，在你的项目中安装 history-with-raw-location，方法如下：
$ npm install --save history-with-raw-location
引入
接下来，在你的代码中引入 history-with-raw-location 包，方法如下：
import createBrowserHistory from 'history/createBrowserHistory';
import { createHistoryWithRawLocation } from 'history-with-raw-location';
const history = createHistoryWithRawLocation(createBrowserHistory)();上述代码中，我们使用 createBrowserHistory 方法创建了一个 history 实例，并使用 createHistoryWithRawLocation 方法将其包装。你也可以通过 createMemoryHistory 或 createHashHistory 来创建你自己的 history 实例。
使用
现在，我们可以使用 pushWithRawLocation 和 replaceWithRawLocation 方法来进行跳转了。举个例子：
-- -------------------- ---- -------
-----------------------------
--------- -----------
------- -----------
------ - ----- ---- --
------------ -
----- -------------------
------ - ---- ----- --
----- ---
--
---上述代码中，我们使用了 pushWithRawLocation 方法，并且传递了一个包含 pathname、search、state 和 rawLocation 四个属性的对象作为参数。其中，pathname 表示页面路径，search 表示查询参数，state 表示页面状态，rawLocation 是一个包含原始路径信息的对象，它包含了 path、query 和 hash 三个属性。
与 pushWithRawLocation 类似，使用 replaceWithRawLocation 方法可以实现替换页面的跳转，例如：
-- -------------------- ---- -------
--------------------------------
--------- -----------
------- -----------
------ - ----- ---- --
------------ -
----- -------------------
------ - ---- ----- --
----- ---
--
---注意事项
值得一提的是，使用 history-with-raw-location 库需要注意以下几个问题：
history-with-raw-location库仅支持 v4 版本及以上的 react-router；buildPath方法不支持 IE 浏览器；- 当使用
pushWithRawLocation方法时，由于查询参数的编码机制的不同，可能会导致浏览器对于一些特殊字符的解析出现问题，如中文、特殊符号等，因此并不建议将需要编码的字符放在查询参数中。
总结
本篇文章详细介绍了 history-with-raw-location 库的使用方法及相关注意事项。使用 history-with-raw-location 库，我们可以在 react-router 应用程序中方便的进行页面跳转，并且更加灵活的控制跳转路径信息。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005609e81e8991b448dedd3