diff --git a/.eslintrc.js b/.eslintrc.js
index a921718a97f79..3ec2fe38b4d6f 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -956,6 +956,13 @@ module.exports = {
// to help deprecation and prevent accidental re-use/continued use of code we plan on removing. If you are
// finding yourself turning this off a lot for "new code" consider renaming the file and functions if it is has valid uses.
patterns: ['*legacy*'],
+ paths: [
+ {
+ name: 'react-router-dom',
+ importNames: ['Route'],
+ message: "import { Route } from '@kbn/kibana-react-plugin/public'",
+ },
+ ],
},
],
},
diff --git a/src/core/public/apm_system.ts b/src/core/public/apm_system.ts
index 4e116c0a0182d..81d2c5ec0896f 100644
--- a/src/core/public/apm_system.ts
+++ b/src/core/public/apm_system.ts
@@ -36,6 +36,7 @@ export class ApmSystem {
private pageLoadTransaction?: Transaction;
private resourceObserver: CachedResourceObserver;
private apm?: ApmBase;
+ private executionContext?: ExecutionContextStart;
/**
* `apmConfig` would be populated with relevant APM RUM agent
@@ -56,6 +57,7 @@ export class ApmSystem {
}
this.addHttpRequestNormalization(apm);
+ this.addRouteChangeNormalization(apm);
init(apmConfig);
// hold page load transaction blocks a transaction implicitly created by init.
@@ -65,6 +67,7 @@ export class ApmSystem {
async start(start?: StartDeps) {
if (!this.enabled || !start) return;
+ this.executionContext = start.executionContext;
this.markPageLoadStart();
start.executionContext.context$.subscribe((c) => {
@@ -126,7 +129,7 @@ export class ApmSystem {
/**
* Adds an observer to the APM configuration for normalizing transactions of the 'http-request' type to remove the
- * hostname, protocol, port, and base path. Allows for coorelating data cross different deployments.
+ * hostname, protocol, port, and base path. Allows for correlating data cross different deployments.
*/
private addHttpRequestNormalization(apm: ApmBase) {
apm.observe('transaction:end', (t) => {
@@ -154,7 +157,7 @@ export class ApmSystem {
return;
}
- // Strip the protocol, hostnname, port, and protocol slashes to normalize
+ // Strip the protocol, hostname, port, and protocol slashes to normalize
parts.protocol = null;
parts.hostname = null;
parts.port = null;
@@ -171,4 +174,20 @@ export class ApmSystem {
t.name = `${method} ${normalizedUrl}`;
});
}
+
+ /**
+ * Set route-change transaction name to the destination page name taken from
+ * the execution context. Otherwise, all route change transactions would have
+ * default names, like 'Click - span' or 'Click - a' instead of more
+ * descriptive '/security/rules/:id/edit'.
+ */
+ private addRouteChangeNormalization(apm: ApmBase) {
+ apm.observe('transaction:end', (t) => {
+ const executionContext = this.executionContext?.get();
+ if (executionContext && t.type === 'route-change') {
+ const { name, page } = executionContext;
+ t.name = `${name} ${page || 'unknown'}`;
+ }
+ });
+ }
}
diff --git a/src/plugins/kibana_react/public/index.ts b/src/plugins/kibana_react/public/index.ts
index c1f0a520a1e9c..4b4c0b6e5ab20 100644
--- a/src/plugins/kibana_react/public/index.ts
+++ b/src/plugins/kibana_react/public/index.ts
@@ -47,6 +47,8 @@ export { TableListView } from './table_list_view';
export type { ToolbarButtonProps } from './toolbar_button';
export { POSITIONS, WEIGHTS, TOOLBAR_BUTTON_SIZES, ToolbarButton } from './toolbar_button';
+export { Route } from './router';
+
export { reactRouterNavigate, reactRouterOnClickHandler } from './react_router_navigate';
export type {
diff --git a/src/plugins/kibana_react/public/router/index.ts b/src/plugins/kibana_react/public/router/index.ts
new file mode 100644
index 0000000000000..8659ff73ced36
--- /dev/null
+++ b/src/plugins/kibana_react/public/router/index.ts
@@ -0,0 +1,9 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export { Route } from './router';
diff --git a/src/plugins/kibana_react/public/router/router.tsx b/src/plugins/kibana_react/public/router/router.tsx
new file mode 100644
index 0000000000000..15e2c1df30ced
--- /dev/null
+++ b/src/plugins/kibana_react/public/router/router.tsx
@@ -0,0 +1,86 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React, { useMemo } from 'react';
+import {
+ Route as ReactRouterRoute,
+ RouteComponentProps,
+ RouteProps,
+ useRouteMatch,
+} from 'react-router-dom';
+import { useKibana } from '../context';
+import { useExecutionContext } from '../use_execution_context';
+
+/**
+ * It's a wrapper around the react-router-dom Route component that inserts
+ * MatchPropagator in every application route. It helps track all route changes
+ * and send them to the execution context, later used to enrich APM
+ * 'route-change' transactions.
+ */
+export const Route = ({ children, component: Component, render, ...rest }: RouteProps) => {
+ const component = useMemo(() => {
+ if (!Component) {
+ return undefined;
+ }
+ return (props: RouteComponentProps) => (
+ <>
+
+
+ >
+ );
+ }, [Component]);
+
+ if (component) {
+ return ;
+ }
+ if (render) {
+ return (
+ (
+ <>
+
+ {render(props)}
+ >
+ )}
+ />
+ );
+ }
+ if (typeof children === 'function') {
+ return (
+ (
+ <>
+
+ {children(props)}
+ >
+ )}
+ />
+ );
+ }
+ return (
+
+
+ {children}
+
+ );
+};
+
+const MatchPropagator = () => {
+ const { executionContext } = useKibana().services;
+ const match = useRouteMatch();
+
+ useExecutionContext(executionContext, {
+ type: 'application',
+ page: match.path,
+ id: Object.keys(match.params).length > 0 ? JSON.stringify(match.params) : undefined,
+ });
+
+ return null;
+};
diff --git a/src/plugins/kibana_react/public/use_execution_context/use_execution_context.ts b/src/plugins/kibana_react/public/use_execution_context/use_execution_context.ts
index 9614176bb262e..6e925ff971a6f 100644
--- a/src/plugins/kibana_react/public/use_execution_context/use_execution_context.ts
+++ b/src/plugins/kibana_react/public/use_execution_context/use_execution_context.ts
@@ -15,14 +15,14 @@ import useDeepCompareEffect from 'react-use/lib/useDeepCompareEffect';
* @param context
*/
export function useExecutionContext(
- executionContext: CoreStart['executionContext'],
+ executionContext: CoreStart['executionContext'] | undefined,
context: KibanaExecutionContext
) {
useDeepCompareEffect(() => {
- executionContext.set(context);
+ executionContext?.set(context);
return () => {
- executionContext.clear();
+ executionContext?.clear();
};
}, [context]);
}
diff --git a/x-pack/plugins/cases/public/components/app/routes.tsx b/x-pack/plugins/cases/public/components/app/routes.tsx
index 6fc87f691b2a2..031f86cf4d697 100644
--- a/x-pack/plugins/cases/public/components/app/routes.tsx
+++ b/x-pack/plugins/cases/public/components/app/routes.tsx
@@ -6,7 +6,8 @@
*/
import React, { useCallback } from 'react';
-import { Redirect, Route, Switch } from 'react-router-dom';
+import { Redirect, Switch } from 'react-router-dom';
+import { Route } from '@kbn/kibana-react-plugin/public';
import { AllCases } from '../all_cases';
import { CaseView } from '../case_view';
import { CreateCase } from '../create';
diff --git a/x-pack/plugins/security_solution/public/app/index.tsx b/x-pack/plugins/security_solution/public/app/index.tsx
index 4e0824f527d1e..1e4817307c227 100644
--- a/x-pack/plugins/security_solution/public/app/index.tsx
+++ b/x-pack/plugins/security_solution/public/app/index.tsx
@@ -7,7 +7,8 @@
import React from 'react';
import { render, unmountComponentAtNode } from 'react-dom';
-import { Route, Switch } from 'react-router-dom';
+import { Switch } from 'react-router-dom';
+import { Route } from '@kbn/kibana-react-plugin/public';
import { NotFoundPage } from './404';
import { SecurityApp } from './app';
diff --git a/x-pack/plugins/security_solution/public/app/routes.tsx b/x-pack/plugins/security_solution/public/app/routes.tsx
index 587c4dd230191..a5a82a68d06ef 100644
--- a/x-pack/plugins/security_solution/public/app/routes.tsx
+++ b/x-pack/plugins/security_solution/public/app/routes.tsx
@@ -7,7 +7,8 @@
import { History } from 'history';
import React, { FC, memo, useEffect } from 'react';
-import { Route, Router, Switch } from 'react-router-dom';
+import { Router, Switch } from 'react-router-dom';
+import { Route } from '@kbn/kibana-react-plugin/public';
import { useDispatch } from 'react-redux';
import { AppLeaveHandler, AppMountParameters } from '@kbn/core/public';
diff --git a/x-pack/plugins/security_solution/public/common/components/ml/conditional_links/ml_host_conditional_container.tsx b/x-pack/plugins/security_solution/public/common/components/ml/conditional_links/ml_host_conditional_container.tsx
index 7dcaa1de58d10..a18d51cb63773 100644
--- a/x-pack/plugins/security_solution/public/common/components/ml/conditional_links/ml_host_conditional_container.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/ml/conditional_links/ml_host_conditional_container.tsx
@@ -8,7 +8,8 @@
import { parse, stringify } from 'query-string';
import React from 'react';
-import { Redirect, Route, Switch, useRouteMatch } from 'react-router-dom';
+import { Redirect, Switch, useRouteMatch } from 'react-router-dom';
+import { Route } from '@kbn/kibana-react-plugin/public';
import { url as urlUtils } from '@kbn/kibana-utils-plugin/public';
import { addEntitiesToKql } from './add_entities_to_kql';
diff --git a/x-pack/plugins/security_solution/public/common/components/ml/conditional_links/ml_network_conditional_container.tsx b/x-pack/plugins/security_solution/public/common/components/ml/conditional_links/ml_network_conditional_container.tsx
index a8dcf18702b97..7261ef7335a99 100644
--- a/x-pack/plugins/security_solution/public/common/components/ml/conditional_links/ml_network_conditional_container.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/ml/conditional_links/ml_network_conditional_container.tsx
@@ -8,7 +8,8 @@
import { parse, stringify } from 'query-string';
import React from 'react';
-import { Redirect, Route, Switch, useRouteMatch } from 'react-router-dom';
+import { Redirect, Switch, useRouteMatch } from 'react-router-dom';
+import { Route } from '@kbn/kibana-react-plugin/public';
import { url as urlUtils } from '@kbn/kibana-utils-plugin/public';
import { addEntitiesToKql } from './add_entities_to_kql';
import { replaceKQLParts } from './replace_kql_parts';
diff --git a/x-pack/plugins/security_solution/public/detections/pages/alerts/index.tsx b/x-pack/plugins/security_solution/public/detections/pages/alerts/index.tsx
index 9945d5225ea02..288b389215e48 100644
--- a/x-pack/plugins/security_solution/public/detections/pages/alerts/index.tsx
+++ b/x-pack/plugins/security_solution/public/detections/pages/alerts/index.tsx
@@ -6,7 +6,8 @@
*/
import React from 'react';
-import { Route, Switch } from 'react-router-dom';
+import { Switch } from 'react-router-dom';
+import { Route } from '@kbn/kibana-react-plugin/public';
import { TrackApplicationView } from '@kbn/usage-collection-plugin/public';
import { ALERTS_PATH, SecurityPageName } from '../../../../common/constants';
diff --git a/x-pack/plugins/security_solution/public/exceptions/routes.tsx b/x-pack/plugins/security_solution/public/exceptions/routes.tsx
index 5e89ec8e4d40b..9dad970be0fe9 100644
--- a/x-pack/plugins/security_solution/public/exceptions/routes.tsx
+++ b/x-pack/plugins/security_solution/public/exceptions/routes.tsx
@@ -5,7 +5,8 @@
* 2.0.
*/
import React from 'react';
-import { Route, Switch } from 'react-router-dom';
+import { Switch } from 'react-router-dom';
+import { Route } from '@kbn/kibana-react-plugin/public';
import { TrackApplicationView } from '@kbn/usage-collection-plugin/public';
import * as i18n from './translations';
diff --git a/x-pack/plugins/security_solution/public/hosts/pages/details/details_tabs.tsx b/x-pack/plugins/security_solution/public/hosts/pages/details/details_tabs.tsx
index 7baa72b31ae07..5b1f84fe5373c 100644
--- a/x-pack/plugins/security_solution/public/hosts/pages/details/details_tabs.tsx
+++ b/x-pack/plugins/security_solution/public/hosts/pages/details/details_tabs.tsx
@@ -6,7 +6,8 @@
*/
import React, { useCallback } from 'react';
-import { Route, Switch } from 'react-router-dom';
+import { Switch } from 'react-router-dom';
+import { Route } from '@kbn/kibana-react-plugin/public';
import { UpdateDateRange } from '../../../common/components/charts/common';
import { scoreIntervalToDateTime } from '../../../common/components/ml/score/score_interval_to_datetime';
diff --git a/x-pack/plugins/security_solution/public/hosts/pages/hosts_tabs.tsx b/x-pack/plugins/security_solution/public/hosts/pages/hosts_tabs.tsx
index af619db5e9fa0..6f593b676d5d3 100644
--- a/x-pack/plugins/security_solution/public/hosts/pages/hosts_tabs.tsx
+++ b/x-pack/plugins/security_solution/public/hosts/pages/hosts_tabs.tsx
@@ -6,7 +6,8 @@
*/
import React, { memo, useCallback } from 'react';
-import { Route, Switch } from 'react-router-dom';
+import { Switch } from 'react-router-dom';
+import { Route } from '@kbn/kibana-react-plugin/public';
import { HostsTabsProps } from './types';
import { scoreIntervalToDateTime } from '../../common/components/ml/score/score_interval_to_datetime';
diff --git a/x-pack/plugins/security_solution/public/hosts/pages/index.tsx b/x-pack/plugins/security_solution/public/hosts/pages/index.tsx
index 00afec5da3756..764281a48b737 100644
--- a/x-pack/plugins/security_solution/public/hosts/pages/index.tsx
+++ b/x-pack/plugins/security_solution/public/hosts/pages/index.tsx
@@ -6,7 +6,8 @@
*/
import React from 'react';
-import { Route, Switch, Redirect } from 'react-router-dom';
+import { Switch, Redirect } from 'react-router-dom';
+import { Route } from '@kbn/kibana-react-plugin/public';
import { HOSTS_PATH } from '../../../common/constants';
import { HostDetails } from './details';
import { HostsTableType } from '../store/model';
diff --git a/x-pack/plugins/security_solution/public/management/pages/blocklist/index.tsx b/x-pack/plugins/security_solution/public/management/pages/blocklist/index.tsx
index 59638f2e529ab..0a57b49f0c31b 100644
--- a/x-pack/plugins/security_solution/public/management/pages/blocklist/index.tsx
+++ b/x-pack/plugins/security_solution/public/management/pages/blocklist/index.tsx
@@ -5,7 +5,8 @@
* 2.0.
*/
-import { Switch, Route } from 'react-router-dom';
+import { Switch } from 'react-router-dom';
+import { Route } from '@kbn/kibana-react-plugin/public';
import React, { memo } from 'react';
import { MANAGEMENT_ROUTING_BLOCKLIST_PATH } from '../../common/constants';
import { NotFoundPage } from '../../../app/404';
diff --git a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/index.tsx b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/index.tsx
index ac361ff8f16ad..14aa195e0be81 100644
--- a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/index.tsx
+++ b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/index.tsx
@@ -5,7 +5,8 @@
* 2.0.
*/
-import { Switch, Route } from 'react-router-dom';
+import { Switch } from 'react-router-dom';
+import { Route } from '@kbn/kibana-react-plugin/public';
import React, { memo } from 'react';
import { EndpointList } from './view';
import { MANAGEMENT_ROUTING_ENDPOINTS_PATH } from '../../common/constants';
diff --git a/x-pack/plugins/security_solution/public/management/pages/event_filters/index.tsx b/x-pack/plugins/security_solution/public/management/pages/event_filters/index.tsx
index 54d18f85b739a..9cb825bd06a69 100644
--- a/x-pack/plugins/security_solution/public/management/pages/event_filters/index.tsx
+++ b/x-pack/plugins/security_solution/public/management/pages/event_filters/index.tsx
@@ -5,7 +5,8 @@
* 2.0.
*/
-import { Route, Switch } from 'react-router-dom';
+import { Switch } from 'react-router-dom';
+import { Route } from '@kbn/kibana-react-plugin/public';
import React from 'react';
import { NotFoundPage } from '../../../app/404';
import { MANAGEMENT_ROUTING_EVENT_FILTERS_PATH } from '../../common/constants';
diff --git a/x-pack/plugins/security_solution/public/management/pages/host_isolation_exceptions/index.tsx b/x-pack/plugins/security_solution/public/management/pages/host_isolation_exceptions/index.tsx
index 7ed2adf8c94fa..bf1966d93dda3 100644
--- a/x-pack/plugins/security_solution/public/management/pages/host_isolation_exceptions/index.tsx
+++ b/x-pack/plugins/security_solution/public/management/pages/host_isolation_exceptions/index.tsx
@@ -5,7 +5,8 @@
* 2.0.
*/
-import { Switch, Route } from 'react-router-dom';
+import { Switch } from 'react-router-dom';
+import { Route } from '@kbn/kibana-react-plugin/public';
import React, { memo } from 'react';
import { MANAGEMENT_ROUTING_HOST_ISOLATION_EXCEPTIONS_PATH } from '../../common/constants';
import { NotFoundPage } from '../../../app/404';
diff --git a/x-pack/plugins/security_solution/public/management/pages/index.tsx b/x-pack/plugins/security_solution/public/management/pages/index.tsx
index 2da77bb24c919..f4a83860ceed4 100644
--- a/x-pack/plugins/security_solution/public/management/pages/index.tsx
+++ b/x-pack/plugins/security_solution/public/management/pages/index.tsx
@@ -6,7 +6,8 @@
*/
import React, { memo } from 'react';
-import { Route, Switch, Redirect } from 'react-router-dom';
+import { Switch, Redirect } from 'react-router-dom';
+import { Route } from '@kbn/kibana-react-plugin/public';
import { EuiLoadingSpinner } from '@elastic/eui';
import { TrackApplicationView } from '@kbn/usage-collection-plugin/public';
import {
diff --git a/x-pack/plugins/security_solution/public/management/pages/policy/index.tsx b/x-pack/plugins/security_solution/public/management/pages/policy/index.tsx
index e6680af5c7daf..8157cc65e3fba 100644
--- a/x-pack/plugins/security_solution/public/management/pages/policy/index.tsx
+++ b/x-pack/plugins/security_solution/public/management/pages/policy/index.tsx
@@ -6,7 +6,8 @@
*/
import React, { memo } from 'react';
-import { Route, Switch, Redirect } from 'react-router-dom';
+import { Switch, Redirect } from 'react-router-dom';
+import { Route } from '@kbn/kibana-react-plugin/public';
import { PolicyDetails, PolicyList } from './view';
import {
MANAGEMENT_ROUTING_POLICY_DETAILS_FORM_PATH,
diff --git a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/index.tsx b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/index.tsx
index d9edd9986e156..6d1d56ea25e2d 100644
--- a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/index.tsx
+++ b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/index.tsx
@@ -5,7 +5,8 @@
* 2.0.
*/
-import { Switch, Route } from 'react-router-dom';
+import { Switch } from 'react-router-dom';
+import { Route } from '@kbn/kibana-react-plugin/public';
import React, { memo } from 'react';
import { TrustedAppsList } from './view/trusted_apps_list';
import { MANAGEMENT_ROUTING_TRUSTED_APPS_PATH } from '../../common/constants';
diff --git a/x-pack/plugins/security_solution/public/network/pages/index.tsx b/x-pack/plugins/security_solution/public/network/pages/index.tsx
index e5c130fbe761d..30510e3269f5c 100644
--- a/x-pack/plugins/security_solution/public/network/pages/index.tsx
+++ b/x-pack/plugins/security_solution/public/network/pages/index.tsx
@@ -6,7 +6,8 @@
*/
import React, { useMemo } from 'react';
-import { Redirect, Route, Switch } from 'react-router-dom';
+import { Redirect, Switch } from 'react-router-dom';
+import { Route } from '@kbn/kibana-react-plugin/public';
import { useMlCapabilities } from '../../common/components/ml/hooks/use_ml_capabilities';
import { hasMlUserPermissions } from '../../../common/machine_learning/has_ml_user_permissions';
diff --git a/x-pack/plugins/security_solution/public/network/pages/navigation/network_routes.tsx b/x-pack/plugins/security_solution/public/network/pages/navigation/network_routes.tsx
index ea026664ce1e4..fc4f9d3831ad2 100644
--- a/x-pack/plugins/security_solution/public/network/pages/navigation/network_routes.tsx
+++ b/x-pack/plugins/security_solution/public/network/pages/navigation/network_routes.tsx
@@ -6,7 +6,8 @@
*/
import React, { useCallback } from 'react';
-import { Route, Switch } from 'react-router-dom';
+import { Switch } from 'react-router-dom';
+import { Route } from '@kbn/kibana-react-plugin/public';
import { EuiFlexItem, EuiSpacer } from '@elastic/eui';
import { FlowTargetSourceDest } from '../../../../common/search_strategy/security_solution/network';
diff --git a/x-pack/plugins/security_solution/public/rules/routes.tsx b/x-pack/plugins/security_solution/public/rules/routes.tsx
index 468e2b41e9290..60f37ee5a1dbe 100644
--- a/x-pack/plugins/security_solution/public/rules/routes.tsx
+++ b/x-pack/plugins/security_solution/public/rules/routes.tsx
@@ -5,8 +5,9 @@
* 2.0.
*/
import React from 'react';
-import { Route, Switch } from 'react-router-dom';
+import { Switch } from 'react-router-dom';
+import { Route } from '@kbn/kibana-react-plugin/public';
import { TrackApplicationView } from '@kbn/usage-collection-plugin/public';
import * as i18n from './translations';
import { RULES_PATH, SecurityPageName } from '../../common/constants';
diff --git a/x-pack/plugins/security_solution/public/timelines/pages/index.tsx b/x-pack/plugins/security_solution/public/timelines/pages/index.tsx
index 5ad969adba5cd..8cd417f904023 100644
--- a/x-pack/plugins/security_solution/public/timelines/pages/index.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/pages/index.tsx
@@ -6,7 +6,8 @@
*/
import React from 'react';
-import { Switch, Route, Redirect } from 'react-router-dom';
+import { Switch, Redirect } from 'react-router-dom';
+import { Route } from '@kbn/kibana-react-plugin/public';
import { TimelineType } from '../../../common/types/timeline';
diff --git a/x-pack/plugins/security_solution/public/users/pages/details/details_tabs.tsx b/x-pack/plugins/security_solution/public/users/pages/details/details_tabs.tsx
index 22b394f41bfaf..3cc2970b9d650 100644
--- a/x-pack/plugins/security_solution/public/users/pages/details/details_tabs.tsx
+++ b/x-pack/plugins/security_solution/public/users/pages/details/details_tabs.tsx
@@ -6,7 +6,8 @@
*/
import React, { useCallback, useMemo } from 'react';
-import { Route, Switch } from 'react-router-dom';
+import { Switch } from 'react-router-dom';
+import { Route } from '@kbn/kibana-react-plugin/public';
import { UsersTableType } from '../../store/model';
import { AnomaliesUserTable } from '../../../common/components/ml/tables/anomalies_user_table';
diff --git a/x-pack/plugins/security_solution/public/users/pages/index.tsx b/x-pack/plugins/security_solution/public/users/pages/index.tsx
index 04b1122a39b54..055bb2bb71ab2 100644
--- a/x-pack/plugins/security_solution/public/users/pages/index.tsx
+++ b/x-pack/plugins/security_solution/public/users/pages/index.tsx
@@ -6,7 +6,8 @@
*/
import React from 'react';
-import { Route, Switch, Redirect } from 'react-router-dom';
+import { Switch, Redirect } from 'react-router-dom';
+import { Route } from '@kbn/kibana-react-plugin/public';
import { USERS_PATH } from '../../../common/constants';
import { UsersTableType } from '../store/model';
import { Users } from './users';
diff --git a/x-pack/plugins/security_solution/public/users/pages/users_tabs.tsx b/x-pack/plugins/security_solution/public/users/pages/users_tabs.tsx
index fb2cecee75ea6..4d154ee5e3e7c 100644
--- a/x-pack/plugins/security_solution/public/users/pages/users_tabs.tsx
+++ b/x-pack/plugins/security_solution/public/users/pages/users_tabs.tsx
@@ -6,7 +6,8 @@
*/
import React, { memo, useCallback } from 'react';
-import { Route, Switch } from 'react-router-dom';
+import { Switch } from 'react-router-dom';
+import { Route } from '@kbn/kibana-react-plugin/public';
import { UsersTabsProps } from './types';
import { UsersTableType } from '../store/model';