在前端开发中，历史记录是一个很常见的需求。如果你正在寻求一个简单而又易用的历史记录管理工具，那么 npm 包 history 就是你需要的。
安装
使用 npm 安装 history：
npm install history
或者，使用 yarn：
yarn add history
创建 history 对象
首先，我们需要创建一个 history 对象，它用来管理我们的历史记录。要创建 history 对象，我们可以使用 createBrowserHistory 方法：
import { createBrowserHistory } from 'history';
const history = createBrowserHistory();这会创建一个 history 对象，并返回给我们使用。在上面的代码中，我们使用 import 语句从 history 包中导入了 createBrowserHistory 方法，然后使用它创建了一个浏览器历史记录管理对象。
历史记录的监听
一旦我们创建了 history 对象，我们就可以对其进行监听，以便在历史记录发生变化时执行一些操作。要监听 history 对象的变化，我们可以使用 listen 方法。
const unlisten = history.listen((location, action) => {
console.log(`The current URL is ${location.pathname}${location.search}${location.hash}`);
console.log(`The last navigation action was ${action}`);
});通过这样做，我们为 history 对象添加了一个监听器，当浏览器地址栏的 URL 发生变化时，就会执行上面的回调函数。在回调函数中，我们可以获得当前的 URL 和最后一次的历史记录操作类型（例如 pop, push, replace）。
我们还需注意到，listen 方法会返回一个取消监听的函数，我们可以在任意时刻调用 unlisten() 来取消监听。
导航
history 对象提供了一些方法，用于导航到不同的 URL。这些方法包括：
push: 导航到新的 URL，并添加新的历史记录。replace: 导航到新的 URL，并替换当前的历史记录。go: 导航到指定的历史记录位置。
例如，我们可以这样使用 push 方法：
history.push('/home?name=john#profile');这会在浏览器地址栏中导航到新的 URL，同时也将新的历史记录添加到 history 对象中。
我们还可以使用 replace 方法来替换当前的历史记录：
history.replace('/home');这样做会导致浏览器地址栏中的 URL 发生变化，并且会将替换后的 URL 所代表的历史记录作为当前历史记录。
go 方法允许我们在历史记录中向前或向后导航。例如，我们可以这样向前导航一步：
history.go(1);
这样做会导致浏览器地址栏中的 URL 发生变化，并把我们导航到前进一步后的历史记录。
示例代码
下面是一个完整的示例，它演示了如何使用 history 包：
-- -------------------- ---- ------- ------ - -------------------- - ---- ---------- ----- ------- - ----------------------- ----- -------- - ------------------------- ------- -- - ---------------- ------- --- -- --------------------------------------------------------- ---------------- ---- ---------- ------ --- ------------ --- ---------------------------------------- -------------------------- -------------- -----------
总结
使用 history 包可以很方便地管理浏览器历史记录。我们可以创建 history 对象，监听其中的变化，以及导航到不同的 URL。在实际中，history 包被广泛应用于 Web 应用程序中的路由管理。通过这篇文章的介绍，希望能帮助读者更好地掌握 history 包的使用方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/77835