如何使用 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 router 文档，但是，这是针对 react router 5 的，它确实直接公开了历史记录。

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

Answer 1

此问题在以下拉取请求 [v6] Add <HistoryRouter> for standalone history objects. At a high-level, it should allow you to create a Router object with an external history object similar to the v5 documentation 中进行了详细讨论。

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

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

How to pass history to App Insights with React Router 6

react-router-dom

azure-application-insights