使用require("history").createBrowserHistory

当我们使用React Router来构建我们的应用程序时，它使用history库来管理浏览器的会话历史记录。history库提供了一组函数和对象，帮助我们管理浏览器会话历史记录的不同方面。其中之一是通过createBrowserHistory函数创建一个新的history对象，它允许我们控制浏览器地址栏中的URL并与应用程序中的路由器交互。

安装

在继续之前，我们需要确保已经安装了history库。如果没有，请在控制台运行以下命令：

npm install history

使用

一旦我们拥有了history库，我们就可以使用它来创建一个新的history对象。这可以通过以下方式完成：

const { createBrowserHistory } = require("history");
const history = createBrowserHistory();

代码中的第一行从history库中导入createBrowserHistory函数。接下来，我们通过调用此函数来创建一个新的history对象，并将其保存在名为history的常量中。这样我们就可以使用history对象来控制URL，并与我们的应用程序中的路由器进行交互。

可选配置项

createBrowserHistory也可以接收一个可选的配置对象作为参数。这些配置选项允许我们自定义新创建的history对象的行为。

以下是可用的配置选项：

• basename - 指定应用程序的基本URL。
• forceRefresh - 当设置为true时，将强制刷新页面，而不是仅更新URL。默认设置为false。
• keyLength - 指定由history库用于管理会话历史记录的key的长度。默认为6。

下面是一个示例，显示如何在创建新的history对象时使用这些配置选项：

const { createBrowserHistory } = require("history");
const history = createBrowserHistory({
  basename: "/app",
  forceRefresh: true,
  keyLength: 12
});

在此代码中，我们将一个配置对象传递给createBrowserHistory函数。该对象具有三个键：basename，forceRefresh和keyLength。这些选项允许我们指定history对象的行为，并修改其默认值。

结论

createBrowserHistory函数允许我们创建一个新的浏览器历史记录管理对象。我们可以使用它来控制URL并与路由器进行交互。此外，我们可以使用可选配置选项来自定义新创建的history对象的行为。

现在，你可以在应用程序中使用history库，以管理浏览器会话历史记录，并为用户提供清晰的导航和URL控件。