简介
@jnv/history 是一个 npm 包，能够轻松为 React 应用添加浏览器历史记录。它支持 HTML5 history API 和 hash 值的 history，可以帮助开发者创造更加流畅的用户体验，同时还能更好地支持 SEO。这篇文章将会详细介绍如何使用 @jnv/history。
安装
在使用 @jnv/history 之前，你需要在你的项目中安装它。你可以通过在终端中输入以下代码来安装这个包：
npm install @jnv/history
或者，如果你使用 Yarn，也可以使用以下代码进行安装：
yarn add @jnv/history
创建 History 对象
在将 @jnv/history 用于你的项目之前，你需要先创建一个 History 对象。你可以通过下面的代码来创建一个 HTML5 history API 对象：
import { createBrowserHistory } from "@jnv/history";
const history = createBrowserHistory();如果你需要使用 hash 值的 history，那么可以使用下面的代码：
import { createHashHistory } from "@jnv/history";
const history = createHashHistory();监听历史记录变化
一旦你创建好了 History 对象，你就可以开始监听浏览器历史记录的变化了。你可以使用 history.listen 方法来监听历史记录的变化。下面是一个简单的例子：
history.listen((location, action) => {
console.log(`location: ${location.pathname}${location.search}${location.hash}`);
console.log(`action: ${action}`);
});在上面的代码中，我们监听了历史记录的变化，并在控制台上打印了一些信息。location 参数包含了当前的路由信息，action 参数则包含了最近的一次历史记录操作。
导航
在使用 @jnv/history 时，我们可以通过 history.push 方法来导航到一个新的路由。下面是一个例子：
history.push("/new-route");如果你想要替换当前的路由而不是添加一个新的历史记录，那么你可以使用 history.replace 方法：
history.replace("/new-route");参数传递
在实际的开发中，我们经常需要在路由之间传递参数。对于这种情况，@jnv/history 也提供了相应的方法。
首先，我们可以在路径中声明参数，例如：
history.push("/users/123");在这个例子中，我们声明了一个名为 id 的参数，其值为 123。对于这个路由，我们可以使用 history.location 来获取路由中的参数。例如：
console.log(history.location.pathname); // "/users/123"
console.log(history.location.search); // ""
console.log(history.location.hash); // ""
const id = history.location.pathname.replace("/users/", "");
console.log(id); // "123"如果我们需要在路由之间传递更多的参数，那么可以使用查询参数。例如：
history.push("/users?id=123&name=john");在这个例子中，我们使用了查询参数来传递 id 和 name 两个参数。我们可以使用 history.location.search 来获取查询参数：
console.log(history.location.pathname); // "/users"
console.log(history.location.search); // "?id=123&name=john"
console.log(history.location.hash); // ""
const searchParams = new URLSearchParams(history.location.search);
console.log(searchParams.get("id")); // "123"
console.log(searchParams.get("name")); // "john"总结
@jnv/history 是一个非常实用的 npm 包，能够帮助我们轻松地为 React 应用添加浏览器历史记录。在本文中，我们介绍了如何创建 History 对象、监听历史记录变化、导航和传递参数等方面的内容。希望这篇文章能够对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bc5967216659e2443a5