前言
在前端开发中，页面的路由管理是必不可少的一个环节。而 React 应用的路由管理就需要借助于一些第三方库来实现。其中，historie 库便是一个非常常用的路由管理工具。本篇文章将详细介绍如何使用 historie 库。
historie 简介
historic 是一个 JavaScript 库，用于管理您的 Web 应用程序的会话历史。它将不同的 JavaScript 环境与一致的 API 进行交互：在 DOM 环境中，它通过 HTML5 历史 API 提供一个统一的界面，在 Node.JS 环境中，它提供了与 Node.JS 和 Express 兼容的方式。它还支持诸如 React、React Native 和其它视图库等范式，因此您可以使用自己喜欢的方式构建想要的页面导航。
安装
historie 可以通过 npm 下载，安装很简单：
npm install history
使用 historie
创建 historie 对象
- 使用 createBrowserHistory() 来创建浏览器的 historie 对象
const history = createBrowserHistory()
- 或者使用 createMemoryHistory() 来创建内存的 historie 对象
const history = createMemoryHistory()
基本 API
- push(path, [state])：用于跳转到一个新的地址，可以传递一个 state 对象
history.push('/home', { name: 'john' })
- replace(path, [state])：与 push() 方法相似，但是不会添加新的页面历史记录。
history.replace('/home', { name: 'john' })
- go(n)：在页面历史中向前或向后移动 n 步，类似于浏览器的前进和后退按钮。
history.go(-1)
- goBack()：向后移动一步。
history.goBack()
- goForward()：向前移动一步。
history.goForward()
- block(prompt)：阻止跳转操作并提示用户。
history.block('确定要离开当前页面吗？')
常用属性
- location：表示当前 URL 的信息。
const pathname = history.location.pathname
- listen(listener)：添加一个监听器。
history.listen((location, action) => { console.log(location.pathname) })
示例
下面是一个使用 historie 的示例：
-- -------------------- ---- -------
------ ----- ---- -------
------ - ------- ----- - ---- ------------------
------ - -------------------- - ---- ---------
----- ------- - ----------------------
----- --- - -- -- -
------- ------------------
------ -------- ---------------- --
------ ------------- ----------------- --
---------
-
----- ---- - -- -- -
-----
-------------
------- ----------- -- ---------------------- - ----- ------ ------ -- --------------
------
-
----- ----- - -- -------- -- -- -
-----
--------------
----------------------------
------- --------------------------- -------------
------
-
------ ------- ---以上便是使用 historie 的基本教程，希望能帮助大家更好地管理页面路由。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055e8381e8991b448dbe1d