如何使用 React Router 6 将历史记录传递到 App Insights

Question

Azure App Insights 建议使用其 SPA 反应插件。https://learn.microsoft.com/en-us/azure/azure-monitor/app/javascript-react-plugin

在记录的示例中，他们手动创建浏览器历史记录以传递给扩展程序。

// AppInsights.js
import { ApplicationInsights } from '@microsoft/applicationinsights-web';
import { ReactPlugin } from '@microsoft/applicationinsights-react-js';
import { createBrowserHistory } from 'history';

const browserHistory = createBrowserHistory({ basename: '' });
const reactPlugin = new ReactPlugin();
const appInsights = new ApplicationInsights({
    config: {
        instrumentationKey: 'YOUR_INSTRUMENTATION_KEY_GOES_HERE',
        extensions: [reactPlugin],
        extensionConfig: {
          [reactPlugin.identifier]: { history: browserHistory }
        }
    }
});
appInsights.loadAppInsights();
export { reactPlugin, appInsights };

但是，我使用的是 React router 6，我认为它会创建自己的浏览器历史记录。该文档确实参考了 React Router 文档，但是，这是针对 React Router 5 的，它确实直接公开了历史记录。

使用 React Router 6，访问路由器创建的历史记录的正确方法是什么？

Answer 1

在以下拉取请求[v6] 添加 <HistoryRouter> 为独立历史对象中详细讨论了此问题。在高层次上，它应该允许您使用类似于v5 文档的外部历史对象创建 Router 对象。

目前，您最好的选择是将 HistoryRouter 组件从拉取请求导入到您自己的项目中，以便您可以创建和使用独立的历史对象来获取应用程序见解。