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

Question

Azure App Insights 建议使用他们的 SPA 反应插件。 https://docs.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 路由器文档，但是，这是针对 react 路由器 5 的，它确实直接公开了历史记录。

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

Answer 1

在以下拉取请求[v6] Add <HistoryRouter> for standalone history objects 中详细讨论了此问题。概括地说，它应该允许您使用类似于v5 documentation 的外部历史对象创建路由器对象。

目前，最好的办法是将拉取请求中的 HistoryRouter 组件导入到您自己的项目中，这样您就可以创建和使用独立的历史对象来获取应用洞察。