什么是 @motorcycle/history？
@motorcycle/history 是一个 JavaScript 库，专用于前端应用程序中的路由历史记录管理。它可用于创建可重放、可撤销的浏览器历史记录，并将其与状态管理库（如 Redux）集成。它还提供了一些方便的函数，用于与 url 相关的任务，如解析和序列化 url 。
安装
您可以使用以下命令将 @motorcycle/history 添加到您的项目中：
npm install @motorcycle/history
用法
基本用法
使用 @motorcycle/history 的最基本方法如下所示：
import { createHistory } from '@motorcycle/history';
const history = createHistory();调用 createHistory() 会返回一个包含以下函数的对象：
push(pathname: string, state?: any): 向历史记录中添加新条目。replace(pathname: string, state?: any): 用当前位置替换最后一个条目。go(n: number): 加 n（可以是负数） 表示前进还是后退。goBack():等同于go(-1)。goForward():等同于go(1)getLocation(): 获取当前位置，并返回一个 LocationLike 对象。listen(cb: (location: LocationLike) => void): 注册一个回调，每次位置改变时都会被调用。
访问位置信息
要获取当前位置信息，您可以使用 getLocation()。
const location = history.getLocation(); // { pathname: '/', search: '', hash: '', state: undefined }getLocation() 会返回一个对象，其中包含以下键：
pathname：表示 URL 中的路径部分（从域名之后的斜杠到查询字符串之前的斜杠）的字符串。search：表示 URL 中的查询字符串的字符串。hash：表示 URL 中的哈希的字符串。state：表示与当前位置关联的状态对象。该值使用 push 或 replace 函数提供的第二个参数设置。
追加新位置
您可以使用 push 函数将新位置添加到历史记录中。
history.push('/new-page'); // 新页面的路径是 '/new-page'。push() 接受一个字符串参数，表示您想要添加到历史记录中的新位置的路径，如上例。
替换当前位置
您可以使用 replace () 将当前位置替换为新位置。
history.replace('/new-page'); // 将当前位置改为 '/new-page'。replace() 接受一个字符串参数，表示您想要将当前位置替换为的新位置的路径，如上例。
前进/后退/指定移动
要前进或后退，您可以使用 go() 函数。
history.go(-1); // 等同于 goBack() history.go(1); // 等同于 goForward()
go() 接受一个整数参数，表示您要向前（正数）或向后（负数）移动的条目数，如上例。
监听位置更改
如果您想在位置更改时执行一些操作，例如更新视图状态，可以使用 listen() 函数。
history.listen(location => {
console.log('location changed to', location);
});listen() 接受一个函数作为参数，每当位置更改时都会调用该函数，并传递包含新位置信息的 LocationLike 对象作为其唯一参数，如上例。
解析和序列化 URL
另一个有用的功能是将 URL 字符串解析为 LocationLike 对象或将 LocationLike 对象序列化为 URL 字符串。
import { parsePath, createPath } from '@motorcycle/history';
// 解析 URL 字符串
const location = parsePath('/blog?search=hello#comments');
// 序列化 LocationLike 对象
const url = createPath(location); // '/blog?search=hello#comments'结论
@motorcycle/history 是一种管理前端应用程序历史记录的有效方法。它不仅非常灵活，而且易于使用和集成到您的项目中。通过管理浏览器历史记录，您可以为您的用户提供更好的用户体验，并增强客户端路由相关的可能性，所以尽管使用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bcc967216659e2447b0