一、介绍
React Router 是 React 之一重要的第三方库，它已经成为构建 Web 应用程序的标准方式。Browser history 对象是 React Router 将 URL 和 UI 同步的关键。从 version 6.0.0 开始，React Router 更换为了使用 createBrowserHistory 来创建 history 对象。本篇文章将从多个方面详细阐述 createBrowserHistory 相关内容。
二、createBrowserHistory 基础知识
createBrowserHistory 实际上创建了一个 history 对象，对传统 HTML5 History API 进行了封装。history 对象是一个 JavaScript 对象，提供了对 window 的 history 调用的封装。我们可以使用在 React Router 中使用该对象来将 URL 和 UI 保持同步。
三、createBrowserHistory 代码演示
import { createBrowserHistory } from 'history';
const history = createBrowserHistory();
history.push('/home');
history.goBack();
以上代码演示了如何使用 createBrowserHistory 来创建 history 对象，并如何使用这个对象来更新 URL。可以看到，通过使用 history.push('/home') 函数，我们可以将 URL 更新为 /home。而 history.goBack() 函数可以将用户前往上一个页面。
四、createBrowserHistory 参数
createBrowserHistory 支持传递参数来更细粒度地控制 history 对象的行为。下面是部分常用的参数：
4.1 forceRefresh
import { createBrowserHistory } from 'history';
const history = createBrowserHistory({forceRefresh:true});
forceRefresh (boolean)：如果设置为 true， 当 history 发现 URL 和当前的 URL 不同，它将导致页面重新加载。这与 window.location = url 所具有的相同的行为。
4.2 basename
import { createBrowserHistory } from 'history';
const history = createBrowserHistory({basename:'/myapp'});
basename (string)：basename 能够让所有的 location.pathname 前缀被忽略。举个例子，如果你正在 /myapp 路径下使用该 history，那么您的代码不需要知道它，因为所有的 url 都将与 /myapp 前缀相匹配。
4.3 hashType
import { createBrowserHistory } from 'history';
const history = createBrowserHistory({hashType:'slash'});
hashType (string)：hashType 消除哈希前缀和路径前缀之间的混淆，接受两个值：slash 和 noslash。当使用 slash 时，路径是从 / 开始的，并且不包含哈希符号。而在使用 noslash 时，则是路径去掉第一个斜杠，并包含哈希符号。
五、createBrowserHistory 实现原理
history 对象是 createBrowserHistory 函数的返回值，该函数内部采用了 HTML5 History API 提供的 pushState，replaceState 和 popstate 三个 API 来实现页面跳转和 history 对象的状态修改。
该函数还包含一些 otherFunctions，其中最常用的两个是 block 和 listen。它们用于阻止add,delete,update这些操作，和监听当前 URL 的变化。在其他的 React 组件中，我们可以使用路由钩子通过 block 函数来拦截导航。这样一来的话， currentLocation 就代替了 history 的行为。
六、总结
createBrowserHistory 函数是实现 React Router 4 的必要条件之一。它是 React Router 库建立在 HTML5 History API 之上的封装器。同时，使用 createBrowserHistory 可以对应用程序行为进行细粒度的控制，实现用户友好的页面转换。
