React Router 的 history 模块学习笔记

什么是 React Router？

React Router 是一个由 React 社区维护的路由库，它可以把页面的 URL 与组件的状态进行绑定，允许用户通过浏览器的前进和后退按钮在应用中进行导航。

history 模块的作用

React Router 依赖于 history 库来监听 URL 的变化，切换路由，以及管理浏览历史记录。

history 模块提供了一个用于跟踪浏览历史变化的 API，支持 HTML5 历史记录 API、hash 历史记录 API 和内存历史记录 API 三种模式。为了让 React Router 适用于不同的环境，React Router 4 弃用了原来的 createHistory 函数，改为了采用了由 history 模块的 createBrowserHistory、createHashHistory、createMemoryHistory 函数创造而来的 history 对象。

如何使用 history 模块

使用 createBrowserHistory

createBrowserHistory 可以在支持 HTML5 历史记录 API 的浏览器中使用。在通常的情况下，我们使用浏览器的前进和后退按钮进行路由的切换，这些操作都会被 push 和 replace 函数记录到浏览器的历史记录中：

import { createBrowserHistory } from 'history';

const history = createBrowserHistory();

history.push('/home');
history.replace('/about');

使用 createHashHistory

createHashHistory 可以在不支持 HTML5 历史记录 API 的浏览器中（如 IE9 及以下的浏览器）使用。在 hash 模式下，URL 中的 # 符号被用来表示当前的状态，hash 历史记录 API 支持 push 和 replace 函数，可以用来记录浏览历史：

import { createHashHistory } from 'history';

const history = createHashHistory();

history.push('/home');
history.replace('/about');

使用 createMemoryHistory

createMemoryHistory 可以用来在无需访问浏览器时仅仅在内存中管理路由状态。这种模式常常用来做单元测试等一些在浏览器中无法测试的场景：

import { createMemoryHistory } from 'history';

const history = createMemoryHistory();

history.push('/home');
history.replace('/about');

其他函数

除了 push 和 replace 函数外，history 对象还提供了其他一些函数，如 go、goBack、goForward、listen、block 等。这些函数可以用来监听浏览历史变化、阻止路由的转换等功能。

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.push('/about');

unlisten();

总结

在 React Router 中，history 模块为 React Router 提供了路由切换、历史记录管理等功能，通过使用 history 模块提供的 API 函数，我们可以方便地控制路由状态和浏览历史记录，帮助我们快速地搭建路由系统，提升用户体验。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6467bcf9968c7c53b0811fa0