Add react-router-dom-v5-compat (#159173)

## Summary

Prep work for bumping react-router to v6
Following https://github.com/remix-run/react-router/discussions/8753

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>

examples/bfetch_explorer/public/containers/app/index.tsx

@@ -8,6 +8,7 @@
 
 import React from 'react';
 import { BrowserRouter as Router, Redirect, Switch } from 'react-router-dom';
+import { CompatRouter } from 'react-router-dom-v5-compat';
 import { Route } from '@kbn/shared-ux-router';
 import { EuiPage } from '@elastic/eui';
 import { useDeps } from '../../hooks/use_deps';
@@ -26,6 +27,7 @@ export const App: React.FC = () => {
 
   return (
     <Router basename={appBasePath}>
+      <CompatRouter>
         <EuiPage>
           <Sidebar />
           <Switch>
@@ -33,6 +35,7 @@ export const App: React.FC = () => {
             <Redirect to="/count-until" />
           </Switch>
         </EuiPage>
+      </CompatRouter>
     </Router>
   );
 };

examples/content_management_examples/public/examples/index.tsx

@@ -10,6 +10,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 // eslint-disable-next-line no-restricted-imports
 import { Router, Switch, Route, Redirect } from 'react-router-dom';
+import { CompatRouter } from 'react-router-dom-v5-compat';
 import { RedirectAppLinks } from '@kbn/shared-ux-link-redirect-app';
 import { EuiPageTemplate, EuiSideNav } from '@elastic/eui';
 import { AppMountParameters, CoreStart } from '@kbn/core/public';
@@ -24,6 +25,7 @@ export const renderApp = (
 ) => {
   ReactDOM.render(
     <Router history={history}>
+      <CompatRouter>
         <RedirectAppLinks coreStart={core}>
           <EuiPageTemplate offset={0}>
             <EuiPageTemplate.Sidebar>
@@ -68,6 +70,7 @@ export const renderApp = (
             </EuiPageTemplate.Section>
           </EuiPageTemplate>
         </RedirectAppLinks>
+      </CompatRouter>
     </Router>,
     element
   );

examples/embeddable_explorer/public/app.tsx

@@ -9,6 +9,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { BrowserRouter as Router, withRouter, RouteComponentProps } from 'react-router-dom';
+import { CompatRouter } from 'react-router-dom-v5-compat';
 import { Route } from '@kbn/shared-ux-router';
 import { EuiPage, EuiPageSideBar_Deprecated as EuiPageSideBar, EuiSideNav } from '@elastic/eui';
 
@@ -126,12 +127,14 @@ const EmbeddableExplorerApp = ({
 
   return (
     <Router basename={basename}>
+      <CompatRouter>
         <EuiPage>
           <EuiPageSideBar>
             <Nav navigateToApp={navigateToApp} pages={pages} />
           </EuiPageSideBar>
           {routes}
         </EuiPage>
+      </CompatRouter>
     </Router>
   );
 };

examples/guided_onboarding_example/public/components/app.tsx

@@ -9,6 +9,7 @@
 import React from 'react';
 import { FormattedMessage, I18nProvider } from '@kbn/i18n-react';
 import { Router, Switch } from 'react-router-dom';
+import { CompatRouter } from 'react-router-dom-v5-compat';
 import { Route } from '@kbn/shared-ux-router';
 
 import { EuiPageTemplate } from '@elastic/eui';
@@ -45,6 +46,7 @@ export const GuidedOnboardingExampleApp = (props: GuidedOnboardingExampleAppDeps
         {guidedOnboarding.guidedOnboardingApi?.isEnabled ? (
           <EuiPageTemplate.Section>
             <Router history={history}>
+              <CompatRouter>
                 <Switch>
                   <Route exact path="/">
                     <Main notifications={notifications} guidedOnboarding={guidedOnboarding} />
@@ -58,14 +60,11 @@ export const GuidedOnboardingExampleApp = (props: GuidedOnboardingExampleAppDeps
                   <Route exact path="/stepThree">
                     <StepThree guidedOnboarding={guidedOnboarding} />
                   </Route>
-                p
+                  <Route path="/stepFour/:indexName?">
-                <Route
+                    <StepFour guidedOnboarding={guidedOnboarding} />
-                  path="/stepFour/:indexName?"
+                  </Route>
-                  render={(routeProps) => (
-                    <StepFour guidedOnboarding={guidedOnboarding} {...routeProps} />
-                  )}
-                />
                 </Switch>
+              </CompatRouter>
             </Router>
           </EuiPageTemplate.Section>
         ) : (

examples/guided_onboarding_example/public/components/step_four.tsx

@@ -17,19 +17,16 @@ import {
   EuiPageContentBody_Deprecated as EuiPageContentBody,
   EuiCode,
 } from '@elastic/eui';
-import { RouteComponentProps } from 'react-router-dom';
+import { useParams } from 'react-router-dom';
 
 interface StepFourProps {
   guidedOnboarding: GuidedOnboardingPluginStart;
 }
 
-export const StepFour = (props: StepFourProps & RouteComponentProps<{ indexName: string }>) => {
+export const StepFour: React.FC<StepFourProps> = ({
-  const {
   guidedOnboarding: { guidedOnboardingApi },
-    match: {
+}) => {
-      params: { indexName },
+  const { indexName } = useParams<{ indexName: string }>();
-    },
-  } = props;
 
   const [, setIsTourStepOpen] = useState<boolean>(false);
 

examples/portable_dashboards_example/public/app.tsx

@@ -10,6 +10,7 @@ import ReactDOM from 'react-dom';
 import React, { useMemo } from 'react';
 import { useAsync } from 'react-use/lib';
 import { Router, Redirect, Switch } from 'react-router-dom';
+import { CompatRouter } from 'react-router-dom-v5-compat';
 
 import { Route } from '@kbn/shared-ux-router';
 import { AppMountParameters } from '@kbn/core/public';
@@ -49,6 +50,7 @@ const PortableDashboardsDemos = ({
 }) => {
   return (
     <Router history={history}>
+      <CompatRouter>
         <Switch>
           <Route exact path="/">
             <Redirect to={DASHBOARD_DEMO_PATH} />
@@ -60,6 +62,7 @@ const PortableDashboardsDemos = ({
             <DashboardsDemo data={data} dashboard={dashboard} history={history} />
           </Route>
         </Switch>
+      </CompatRouter>
     </Router>
   );
 };

examples/response_stream/public/containers/app/index.tsx

@@ -8,6 +8,7 @@
 
 import React from 'react';
 import { BrowserRouter as Router, Redirect, Switch } from 'react-router-dom';
+import { CompatRouter } from 'react-router-dom-v5-compat';
 import { Route } from '@kbn/shared-ux-router';
 import { EuiPage } from '@elastic/eui';
 import { useDeps } from '../../hooks/use_deps';
@@ -26,6 +27,7 @@ export const App: React.FC = () => {
 
   return (
     <Router basename={appBasePath}>
+      <CompatRouter>
         <EuiPage>
           <Sidebar />
           <Switch>
@@ -33,6 +35,7 @@ export const App: React.FC = () => {
             <Redirect to="/simple-string-stream" />
           </Switch>
         </EuiPage>
+      </CompatRouter>
     </Router>
   );
 };

examples/screenshot_mode_example/public/components/app.tsx

@@ -8,6 +8,7 @@
 
 import React, { useEffect } from 'react';
 import { BrowserRouter as Router } from 'react-router-dom';
+import { CompatRouter } from 'react-router-dom-v5-compat';
 import { FormattedMessage, I18nProvider } from '@kbn/i18n-react';
 
 import {
@@ -62,6 +63,7 @@ export const ScreenshotModeExampleApp = ({
   }, [isScreenshotMode, notifications, http]);
   return (
     <Router basename={basename}>
+      <CompatRouter>
         <I18nProvider>
           <>
             <navigation.ui.TopNavMenu
@@ -117,6 +119,7 @@ export const ScreenshotModeExampleApp = ({
             </EuiPage>
           </>
         </I18nProvider>
+      </CompatRouter>
     </Router>
   );
 };

examples/search_examples/public/application.tsx

@@ -9,6 +9,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Router, Redirect } from 'react-router-dom';
+import { CompatRouter } from 'react-router-dom-v5-compat';
 import { Route } from '@kbn/shared-ux-router';
 import { I18nProvider } from '@kbn/i18n-react';
 import { AppMountParameters, CoreStart } from '@kbn/core/public';
@@ -48,6 +49,7 @@ export const renderApp = (
       <RedirectAppLinks application={application}>
         <SearchExamplePage exampleLinks={LINKS} basePath={http.basePath}>
           <Router history={history}>
+            <CompatRouter>
               <Route path={LINKS[0].path}>
                 <SearchExamplesApp
                   notifications={notifications}
@@ -72,6 +74,7 @@ export const renderApp = (
               <Route path="/" exact={true}>
                 <Redirect to={LINKS[0].path} />
               </Route>
+            </CompatRouter>
           </Router>
         </SearchExamplePage>
       </RedirectAppLinks>

examples/state_containers_examples/public/todo/todo.tsx

@@ -8,6 +8,7 @@
 
 import React, { useEffect, useMemo } from 'react';
 import { Link, Router, Switch, useLocation } from 'react-router-dom';
+import { CompatRouter } from 'react-router-dom-v5-compat';
 import { Route } from '@kbn/shared-ux-router';
 import { History } from 'history';
 import {
@@ -185,6 +186,7 @@ export const TodoAppPage: React.FC<{
 
   return (
     <Router history={props.history}>
+      <CompatRouter>
         <EuiPageBody>
           <EuiPageHeader>
             <EuiPageHeaderSection>
@@ -236,6 +238,7 @@ export const TodoAppPage: React.FC<{
             </EuiPageContentBody>
           </EuiPageContent>
         </EuiPageBody>
+      </CompatRouter>
     </Router>
   );
 };

examples/state_containers_examples/public/with_data_services/app.tsx

@@ -9,6 +9,7 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import { History } from 'history';
 import { Router } from 'react-router-dom';
+import { CompatRouter } from 'react-router-dom-v5-compat';
 
 import {
   EuiFieldText,
@@ -79,7 +80,7 @@ export const App = ({
   return (
     <StateContainersExamplesPage navigateToApp={navigateToApp} exampleLinks={exampleLinks}>
       <Router history={history}>
-        <>
+        <CompatRouter>
           <EuiPageBody>
             <EuiPageHeader>
               <EuiTitle size="l">
@@ -114,7 +115,7 @@ export const App = ({
               />
             </EuiPageContent>
           </EuiPageBody>
-        </>
+        </CompatRouter>
       </Router>
     </StateContainersExamplesPage>
   );

package.json

@@ -933,9 +933,10 @@
     "react-resizable": "^3.0.4",
     "react-resize-detector": "^7.1.1",
     "react-reverse-portal": "^2.1.0",
-    "react-router": "^5.2.0",
+    "react-router": "^5.3.4",
     "react-router-config": "^5.1.1",
-    "react-router-dom": "^5.2.0",
+    "react-router-dom": "^5.3.4",
+    "react-router-dom-v5-compat": "^6.12.0",
     "react-shortcuts": "^2.1.0",
     "react-syntax-highlighter": "^15.3.1",
     "react-use": "^15.3.8",
@@ -1305,9 +1306,9 @@
     "@types/react-grid-layout": "^1.3.2",
     "@types/react-intl": "^2.3.15",
     "@types/react-is": "^17.0.3",
-    "@types/react-router": "^5.1.7",
+    "@types/react-router": "^5.1.20",
-    "@types/react-router-config": "^5.0.2",
+    "@types/react-router-config": "^5.0.7",
-    "@types/react-router-dom": "^5.1.5",
+    "@types/react-router-dom": "^5.3.3",
     "@types/react-syntax-highlighter": "^15.4.0",
     "@types/react-test-renderer": "^17.0.2",
     "@types/react-virtualized": "^9.21.22",

packages/core/application/core-application-browser-internal/src/ui/app_router.tsx

@@ -9,6 +9,7 @@
 import React, { FunctionComponent, useMemo } from 'react';
 // eslint-disable-next-line no-restricted-imports
 import { RouteComponentProps, Router, Route, Switch } from 'react-router-dom';
+import { CompatRouter } from 'react-router-dom-v5-compat';
 import { History } from 'history';
 import { EMPTY, Observable } from 'rxjs';
 import useObservable from 'react-use/lib/useObservable';
@@ -55,6 +56,7 @@ export const AppRouter: FunctionComponent<Props> = ({
 
   return (
     <Router history={history}>
+      <CompatRouter>
         <Switch>
           {[...mounters].map(([appId, mounter]) => (
             <Route
@@ -109,6 +111,7 @@ export const AppRouter: FunctionComponent<Props> = ({
             }}
           />
         </Switch>
+      </CompatRouter>
     </Router>
   );
 };

packages/core/chrome/core-chrome-browser-internal/src/ui/project/header.tsx

@@ -28,8 +28,9 @@ import {
 import type { HttpStart } from '@kbn/core-http-browser';
 import { MountPoint } from '@kbn/core-mount-utils-browser';
 import { i18n } from '@kbn/i18n';
-import React, { createRef, useState } from 'react';
+import React, { createRef, useCallback, useState } from 'react';
 import { Router } from 'react-router-dom';
+import { CompatRouter } from 'react-router-dom-v5-compat';
 import useLocalStorage from 'react-use/lib/useLocalStorage';
 import useObservable from 'react-use/lib/useObservable';
 import { Observable, debounceTime } from 'rxjs';
@@ -120,12 +121,15 @@ const Logo = (
     fullHref = props.prependBasePath(homeHref);
   }
 
-  const navigateHome = (event: React.MouseEvent) => {
+  const navigateHome = useCallback(
+    (event: React.MouseEvent) => {
       if (fullHref) {
         props.application.navigateToUrl(fullHref);
       }
       event.preventDefault();
-  };
+    },
+    [fullHref, props.application]
+  );
 
   return (
     <span css={logo.container}>
@@ -165,25 +169,33 @@ export const ProjectHeader = ({
   const toggleCollapsibleNavRef = createRef<HTMLButtonElement & { euiAnimate: () => void }>();
   const headerActionMenuMounter = useHeaderActionMenuMounter(observables.actionMenu$);
 
+  const handleCloseNav = useCallback(() => {
+    setIsOpen(false);
+    if (toggleCollapsibleNavRef.current) {
+      toggleCollapsibleNavRef.current.focus();
+    }
+  }, [setIsOpen, toggleCollapsibleNavRef]);
+
+  const handleToggleNavButtonClick = useCallback(
+    () => setIsOpen((prevIsOpen) => !prevIsOpen),
+    [setIsOpen]
+  );
+
   return (
     <>
       <EuiHeader position="fixed" data-test-subj="kibanaProjectHeader">
         <EuiHeaderSection grow={false}>
           <EuiHeaderSectionItem css={headerCss.nav.toggleNavButton}>
             <Router history={application.history}>
+              <CompatRouter>
                 <ProjectNavigation
                   isOpen={isOpen!}
-                closeNav={() => {
+                  closeNav={handleCloseNav}
-                  setIsOpen(false);
-                  if (toggleCollapsibleNavRef.current) {
-                    toggleCollapsibleNavRef.current.focus();
-                  }
-                }}
                   button={
                     <EuiHeaderSectionItemButton
                       data-test-subj="toggleNavButton"
                       aria-label={headerStrings.nav.closeNavAriaLabel}
-                    onClick={() => setIsOpen(!isOpen)}
+                      onClick={handleToggleNavButtonClick}
                       aria-expanded={isOpen!}
                       aria-pressed={isOpen!}
                       aria-controls={navId}
@@ -195,6 +207,7 @@ export const ProjectHeader = ({
                 >
                   {children}
                 </ProjectNavigation>
+              </CompatRouter>
             </Router>
           </EuiHeaderSectionItem>
 

packages/kbn-plugin-generator/template/public/components/app.tsx.ejs

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage, I18nProvider } from '@kbn/i18n-react';
 import { BrowserRouter as Router } from 'react-router-dom';
+import { CompatRouter } from 'react-router-dom-v5-compat';
 
 import {
   EuiButton,
@@ -52,6 +53,7 @@ export const <%= upperCamelCase(name) %>App = ({ basename, notifications, http,
   // Note that `navigation.ui.TopNavMenu` is a stateful component exported on the `navigation` plugin's start contract.
   return (
     <Router basename={basename}>
+      <CompatRouter>
         <I18nProvider>
           <>
             <navigation.ui.TopNavMenu appName={ PLUGIN_ID } showSearchBar={true} useDefaultBehaviors={true}/>
@@ -108,6 +110,7 @@ export const <%= upperCamelCase(name) %>App = ({ basename, notifications, http,
             </EuiPage>
           </>
         </I18nProvider>
+      </CompatRouter>
     </Router>
   );
 };

packages/kbn-typed-react-router-config/src/router_provider.tsx

@@ -8,6 +8,7 @@
 import { History } from 'history';
 import React from 'react';
 import { Router as ReactRouter } from 'react-router-dom';
+import { CompatRouter } from 'react-router-dom-v5-compat';
 import { RouteMap, Router } from './types';
 import { RouterContextProvider } from './use_router';
 
@@ -22,7 +23,9 @@ export function RouterProvider({
 }) {
   return (
     <ReactRouter history={history}>
+      <CompatRouter>
         <RouterContextProvider router={router}>{children}</RouterContextProvider>
+      </CompatRouter>
     </ReactRouter>
   );
 }

packages/kbn-ui-shared-deps-npm/BUILD.bazel

@@ -52,6 +52,7 @@ RUNTIME_DEPS = [
   "@npm//react-beautiful-dnd",
   "@npm//react-dom",
   "@npm//react-router-dom",
+  "@npm//react-router-dom-v5-compat",
   "@npm//react-router",
   "@npm//react",
   "@npm//rxjs",

packages/kbn-ui-shared-deps-npm/webpack.config.js

@@ -99,6 +99,7 @@ module.exports = (_, argv) => {
         'react-dom',
         'react-dom/server',
         'react-router-dom',
+        'react-router-dom-v5-compat',
         'react-router',
         'react',
         'rxjs',

packages/kbn-ui-shared-deps-src/src/definitions.js

@@ -50,6 +50,7 @@ const externals = {
   'react-dom/server': '__kbnSharedDeps__.ReactDomServer',
   'react-router': '__kbnSharedDeps__.ReactRouter',
   'react-router-dom': '__kbnSharedDeps__.ReactRouterDom',
+  'react-router-dom-v5-compat': '__kbnSharedDeps__.ReactRouterDomV5Compat',
   'styled-components': '__kbnSharedDeps__.StyledComponents',
   '@kbn/monaco': '__kbnSharedDeps__.KbnMonaco',
   // this is how plugins/consumers from npm load monaco

packages/kbn-ui-shared-deps-src/src/entry.js

@@ -29,6 +29,7 @@ export const ReactDomServer = require('react-dom/server');
 // eslint-disable-next-line @kbn/eslint/module_migration
 export const ReactRouter = require('react-router');
 export const ReactRouterDom = require('react-router-dom');
+export const ReactRouterDomV5Compat = require('react-router-dom-v5-compat');
 export const StyledComponents = require('styled-components');
 
 Moment.tz.load(require('moment-timezone/data/packed/latest.json'));

packages/shared-ux/router/impl/router.tsx

@@ -23,7 +23,12 @@ import { useSharedUXExecutionContext } from './use_execution_context';
  * and send them to the execution context, later used to enrich APM
  * 'route-change' transactions.
  */
-export const Route = ({ children, component: Component, render, ...rest }: RouteProps) => {
+export const Route = ({
+  children,
+  component: Component,
+  render,
+  ...rest
+}: RouteProps<string, { [K: string]: string }>) => {
   const component = useMemo(() => {
     if (!Component) {
       return undefined;

src/plugins/advanced_settings/public/management_app/mount_management_section.tsx

@@ -9,6 +9,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Router, Switch, Redirect, RouteChildrenProps } from 'react-router-dom';
+import { CompatRouter } from 'react-router-dom-v5-compat';
 import { Route } from '@kbn/shared-ux-router';
 
 import { i18n } from '@kbn/i18n';
@@ -42,10 +43,9 @@ const readOnlyBadge = {
   iconType: 'glasses',
 };
 
-const redirectUrl = ({
+type RedirectUrlProps = RouteChildrenProps<{ [QUERY]: string }>;
-  match,
+
-  location,
+const redirectUrl = ({ match, location }: RedirectUrlProps): LocationDescriptor => {
-}: RouteChildrenProps<{ [QUERY]: string }>): LocationDescriptor => {
   const search = url.addQueryParam(location.search, QUERY, match?.params[QUERY]);
 
   return {
@@ -78,9 +78,12 @@ export async function mountManagementSection(
     <KibanaThemeProvider theme$={params.theme$}>
       <I18nProvider>
         <Router history={params.history}>
+          <CompatRouter>
             <Switch>
               {/* TODO: remove route param (`query`) in 7.13 */}
-            <Route path={`/:${QUERY}`}>{(props) => <Redirect to={redirectUrl(props)} />}</Route>
+              <Route path={`/:${QUERY}`}>
+                {(props: RedirectUrlProps) => <Redirect to={redirectUrl(props)} />}
+              </Route>
               <Route path="/">
                 <Settings
                   history={params.history}
@@ -98,6 +101,7 @@ export async function mountManagementSection(
                 />
               </Route>
             </Switch>
+          </CompatRouter>
         </Router>
       </I18nProvider>
     </KibanaThemeProvider>,

src/plugins/dashboard/public/dashboard_app/dashboard_router.tsx

@@ -12,6 +12,7 @@ import React from 'react';
 import { parse, ParsedQuery } from 'query-string';
 import { render, unmountComponentAtNode } from 'react-dom';
 import { Switch, RouteComponentProps, HashRouter, Redirect } from 'react-router-dom';
+import { CompatRouter } from 'react-router-dom-v5-compat';
 import { Route } from '@kbn/shared-ux-router';
 
 import { I18nProvider } from '@kbn/i18n-react';
@@ -149,6 +150,7 @@ export async function mountApp({ core, element, appUnMounted, mountContext }: Da
       <DashboardMountContext.Provider value={mountContext}>
         <KibanaThemeProvider theme$={core.theme.theme$}>
           <HashRouter>
+            <CompatRouter>
               <Switch>
                 <Route
                   path={[CREATE_NEW_DASHBOARD_URL, `${VIEW_DASHBOARD_URL}/:id`]}
@@ -160,6 +162,7 @@ export async function mountApp({ core, element, appUnMounted, mountContext }: Da
                 </Route>
                 <Route render={renderNoMatch} />
               </Switch>
+            </CompatRouter>
           </HashRouter>
         </KibanaThemeProvider>
       </DashboardMountContext.Provider>

src/plugins/data_view_management/public/management_app/mount_management_section.tsx

@@ -9,6 +9,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Router, Switch, Redirect } from 'react-router-dom';
+import { CompatRouter } from 'react-router-dom-v5-compat';
 import { Route } from '@kbn/shared-ux-router';
 
 import { i18n } from '@kbn/i18n';
@@ -87,6 +88,7 @@ export async function mountManagementSection(
       <KibanaThemeProvider theme$={theme.theme$}>
         <I18nProvider>
           <Router history={params.history}>
+            <CompatRouter>
               <Switch>
                 <Route path={['/create']}>
                   <IndexPatternTableWithRouter canSave={canSave} showCreateDialog={true} />
@@ -102,6 +104,7 @@ export async function mountManagementSection(
                   <IndexPatternTableWithRouter canSave={canSave} />
                 </Route>
               </Switch>
+            </CompatRouter>
           </Router>
         </I18nProvider>
       </KibanaThemeProvider>

src/plugins/dev_tools/public/application.tsx

@@ -10,6 +10,7 @@ import React, { useEffect, useRef } from 'react';
 import { Observable } from 'rxjs';
 import ReactDOM from 'react-dom';
 import { HashRouter as Router, Switch, Redirect, RouteComponentProps } from 'react-router-dom';
+import { CompatRouter } from 'react-router-dom-v5-compat';
 import { Route } from '@kbn/shared-ux-router';
 import { EuiTab, EuiTabs, EuiToolTip, EuiBetaBadge } from '@elastic/eui';
 import { I18nProvider } from '@kbn/i18n-react';
@@ -183,6 +184,7 @@ export function renderApp(
     <I18nProvider>
       <KibanaThemeProvider theme$={theme$}>
         <Router>
+          <CompatRouter>
             <Switch>
               {devTools
                 // Only create routes for devtools that are not disabled
@@ -208,6 +210,7 @@ export function renderApp(
                 <Redirect to={`/${devTools[0].id}`} />
               </Route>
             </Switch>
+          </CompatRouter>
         </Router>
       </KibanaThemeProvider>
     </I18nProvider>,

src/plugins/discover/public/application/discover_router.tsx

@@ -7,6 +7,7 @@
  */
 
 import { Redirect, Router, Switch } from 'react-router-dom';
+import { CompatRouter } from 'react-router-dom-v5-compat';
 import { Route } from '@kbn/shared-ux-router';
 import React from 'react';
 import { History } from 'history';
@@ -23,6 +24,7 @@ export const discoverRouter = (services: DiscoverServices, history: History, isD
   <KibanaContextProvider services={services}>
     <EuiErrorBoundary>
       <Router history={history} data-test-subj="discover-react-router">
+        <CompatRouter>
           <Switch>
             <Route path="/context/:dataViewId/:id">
               <ContextAppRoute />
@@ -47,6 +49,7 @@ export const discoverRouter = (services: DiscoverServices, history: History, isD
             </Route>
             <NotFoundRoute />
           </Switch>
+        </CompatRouter>
       </Router>
     </EuiErrorBoundary>
   </KibanaContextProvider>

x-pack/examples/alerting_example/public/application.tsx

@@ -7,7 +7,7 @@
 
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { BrowserRouter as Router, RouteComponentProps } from 'react-router-dom';
+import { BrowserRouter as Router } from 'react-router-dom';
 import { Route } from '@kbn/shared-ux-router';
 import { EuiPage } from '@elastic/eui';
 import { AppMountParameters, CoreStart } from '@kbn/core/public';
@@ -45,7 +45,7 @@ const AlertingExampleApp = ({
         />
         <Route
           path={`/rule/:id`}
-          render={(props: RouteComponentProps<{ id: string }>) => {
+          render={(props) => {
             return (
               <Page title={`View Rule`} crumb={`View Rule ${props.match.params.id}`}>
                 <ViewAlertPage http={http} id={props.match.params.id} />
@@ -55,7 +55,7 @@ const AlertingExampleApp = ({
         />
         <Route
           path={`/astros/:id`}
-          render={(props: RouteComponentProps<{ id: string }>) => {
+          render={(props) => {
             return (
               <Page title={`View People In Space Rule`} crumb={`Astros ${props.match.params.id}`}>
                 <ViewPeopleInSpaceAlertPage http={http} id={props.match.params.id} />

x-pack/plugins/apm/public/components/shared/transaction_action_menu/transaction_action_menu.test.tsx

@@ -9,7 +9,6 @@ import { act, fireEvent, render } from '@testing-library/react';
 import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
 import { createMemoryHistory } from 'history';
-import { RouterProvider } from '@kbn/typed-react-router-config';
 import { License } from '@kbn/licensing-plugin/common/license';
 import { Transaction } from '../../../../typings/es_schemas/ui/transaction';
 import { ApmPluginContextValue } from '../../../context/apm_plugin/apm_plugin_context';
@@ -26,7 +25,6 @@ import {
 } from '../../../utils/test_helpers';
 import { TransactionActionMenu } from './transaction_action_menu';
 import * as Transactions from './__fixtures__/mock_data';
-import { apmRouter } from '../../routing/apm_route_config';
 
 const apmContextMock = {
   ...mockApmPluginContextValue,
@@ -44,10 +42,8 @@ history.replace(
 function Wrapper({ children }: { children?: React.ReactNode }) {
   return (
     <MemoryRouter>
-      <MockApmPluginContextWrapper value={apmContextMock}>
+      <MockApmPluginContextWrapper value={apmContextMock} history={history}>
-        <RouterProvider history={history} router={apmRouter as any}>
         {children}
-        </RouterProvider>
       </MockApmPluginContextWrapper>
     </MemoryRouter>
   );

x-pack/plugins/canvas/public/routes/workpad/hooks/use_restore_history.ts

@@ -15,7 +15,7 @@ import { decode } from '../route_state';
 
 export const useRestoreHistory = () => {
   const history = useHistory();
-  const location = useLocation();
+  const location = useLocation<string>();
   const dispatch = useDispatch();
 
   const { state: historyState } = location;

x-pack/plugins/canvas/public/routes/workpad/hooks/use_workpad_history.ts

@@ -14,7 +14,7 @@ import { encode, decode } from '../route_state';
 import { State } from '../../../../types';
 
 export const useWorkpadHistory = () => {
-  const history = useHistory();
+  const history = useHistory<string>();
   const historyState = useSelector((state: State) => state.persistent);
   const hasRun = useRef<boolean>(false);
 

x-pack/plugins/cases/public/common/navigation/paths.ts

@@ -5,6 +5,8 @@
  * 2.0.
  */
 
+// eslint-disable-next-line @kbn/eslint/module_migration
+import type { ExtractRouteParams } from 'react-router';
 import { generatePath } from 'react-router-dom';
 import {
   CASES_CREATE_PATH,
@@ -39,18 +41,24 @@ export const getCaseViewWithCommentPath = (casesBasePath: string) =>
 
 export const generateCaseViewPath = (params: CaseViewPathParams): string => {
   const { commentId, tabId } = params;
-  // Cast for generatePath argument type constraint
-  const pathParams = params as unknown as { [paramName: string]: string };
-
   // paths with commentId have their own specific path.
   // Effectively overwrites the tabId
   if (commentId) {
-    return normalizePath(generatePath(CASE_VIEW_COMMENT_PATH, pathParams));
+    return normalizePath(
+      generatePath(
+        CASE_VIEW_COMMENT_PATH,
+        params as ExtractRouteParams<typeof CASE_VIEW_COMMENT_PATH>
+      )
+    );
   }
 
   if (tabId !== undefined) {
-    return normalizePath(generatePath(CASE_VIEW_TAB_PATH, pathParams));
+    return normalizePath(
+      generatePath(CASE_VIEW_TAB_PATH, params as ExtractRouteParams<typeof CASE_VIEW_TAB_PATH>)
+    );
   }
 
-  return normalizePath(generatePath(CASE_VIEW_PATH, pathParams));
+  return normalizePath(
+    generatePath(CASE_VIEW_PATH, params as ExtractRouteParams<typeof CASE_VIEW_PATH>)
+  );
 };

x-pack/plugins/security/public/management/users/users_management_app.tsx

@@ -9,7 +9,6 @@ import type { History } from 'history';
 import type { FunctionComponent } from 'react';
 import React from 'react';
 import { render, unmountComponentAtNode } from 'react-dom';
-import type { RouteComponentProps } from 'react-router-dom';
 import { Redirect, Router, Switch } from 'react-router-dom';
 import type { Observable } from 'rxjs';
 
@@ -37,10 +36,6 @@ interface CreateParams {
   getStartServices: StartServicesAccessor<PluginStartDependencies>;
 }
 
-interface EditUserParams {
-  username: string;
-}
-
 export const usersManagementApp = Object.freeze({
   id: 'users',
   create({ authc, getStartServices }: CreateParams) {
@@ -109,7 +104,7 @@ export const usersManagementApp = Object.freeze({
                 </Route>
                 <Route
                   path="/edit/:username"
-                  render={(props: RouteComponentProps<EditUserParams>) => {
+                  render={(props) => {
                     // Additional decoding is a workaround for a bug in react-router's version of the `history` module.
                     // See https://github.com/elastic/kibana/issues/82440
                     const username = tryDecodeURIComponent(props.match.params.username);

x-pack/plugins/security_solution/cypress/tasks/common/filter_group.ts

@@ -27,7 +27,7 @@ import {
 import { waitForPageFilters } from '../alerts';
 
 export const openFilterGroupContextMenu = () => {
-  cy.get(DETECTION_PAGE_FILTER_GROUP_CONTEXT_MENU).click({ force: true });
+  cy.get(DETECTION_PAGE_FILTER_GROUP_CONTEXT_MENU).click();
 };
 
 export const waitForFilterGroups = () => {
@@ -41,7 +41,7 @@ export const waitForFilterGroups = () => {
 
 export const resetFilterGroup = () => {
   openFilterGroupContextMenu();
-  cy.get(DETECTION_PAGE_FILTER_GROUP_RESET_BUTTON).click({ force: true });
+  cy.get(DETECTION_PAGE_FILTER_GROUP_RESET_BUTTON).click();
 };
 
 export const editFilterGroupControls = () => {
@@ -64,11 +64,11 @@ export const saveFilterGroupControls = () => {
 
 export const discardFilterGroupControls = () => {
   openFilterGroupContextMenu();
-  cy.get(FILTER_GROUP_CONTEXT_DISCARD_CHANGES).click({ force: true });
+  cy.get(FILTER_GROUP_CONTEXT_DISCARD_CHANGES).click();
 };
 
 export const openAddFilterGroupControlPanel = () => {
-  cy.get(FILTER_GROUP_ADD_CONTROL).click({ force: true });
+  cy.get(FILTER_GROUP_ADD_CONTROL).click();
   cy.get(FILTER_GROUP_EDIT_CONTROLS_PANEL).should('be.visible');
 };
 
@@ -96,7 +96,7 @@ export const addNewFilterGroupControlValues = ({
 
 export const deleteFilterGroupControl = (idx: number) => {
   cy.get(CONTROL_FRAME_TITLE).eq(idx).realHover();
-  cy.get(FILTER_GROUP_CONTROL_ACTION_DELETE(idx)).click({ force: true });
+  cy.get(FILTER_GROUP_CONTROL_ACTION_DELETE(idx)).click();
   cy.get(FILTER_GROUP_CONTROL_CONFIRM_DIALOG).should('be.visible');
   cy.get(FILTER_GROUP_CONTROL_CONFIRM_BTN).click();
 };
@@ -111,7 +111,7 @@ export const editFilterGroupControl = ({
   label: string;
 }) => {
   cy.get(CONTROL_FRAME_TITLE).eq(idx).realHover();
-  cy.get(FILTER_GROUP_CONTROL_ACTION_EDIT(idx)).click({ force: true });
+  cy.get(FILTER_GROUP_CONTROL_ACTION_EDIT(idx)).click();
   const { FIELD_SEARCH, FIELD_PICKER, FIELD_LABEL, SAVE } = FILTER_GROUP_EDIT_CONTROL_PANEL_ITEMS;
   cy.get(FIELD_SEARCH).type(fieldName);
   cy.get(FIELD_PICKER(fieldName)).should('exist').click();

x-pack/plugins/security_solution/public/explore/network/pages/index.tsx

@@ -74,7 +74,7 @@ const NetworkContainerComponent = () => {
         }) => (
           <Redirect
             to={{
-              pathname: getPathWithFlowType(detailName, flowTarget),
+              pathname: getPathWithFlowType(detailName, flowTarget as FlowTargetSourceDest),
               search,
             }}
           />

x-pack/plugins/upgrade_assistant/public/application/app.tsx

@@ -7,6 +7,7 @@
 
 import React, { useState, useEffect } from 'react';
 import { Router, Switch, Redirect } from 'react-router-dom';
+import { CompatRouter } from 'react-router-dom-v5-compat';
 import { Route } from '@kbn/shared-ux-router';
 
 import { FormattedMessage } from '@kbn/i18n-react';
@@ -183,7 +184,9 @@ export const App = ({ history }: { history: ScopedHistory }) => {
 
   return (
     <Router history={history}>
+      <CompatRouter>
         <AppHandlingClusterUpgradeState />
+      </CompatRouter>
     </Router>
   );
 };

x-pack/plugins/ux/public/components/app/rum_dashboard/utils/test_helper.tsx

@@ -11,6 +11,7 @@ import { CoreStart } from '@kbn/core/public';
 import { of } from 'rxjs';
 import { createMemoryHistory } from 'history';
 import { Router } from 'react-router-dom';
+import { CompatRouter } from 'react-router-dom-v5-compat';
 import { MemoryHistory } from 'history';
 import { EuiThemeProvider } from '@kbn/kibana-react-plugin/common';
 import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
@@ -38,11 +39,13 @@ export const render = (
 
   return testLibRender(
     <Router history={history}>
+      <CompatRouter>
         <KibanaContextProvider services={{ ...core }}>
           <UrlParamsProvider>
             <EuiThemeProvider>{component}</EuiThemeProvider>
           </UrlParamsProvider>
         </KibanaContextProvider>
+      </CompatRouter>
     </Router>
   );
 };

x-pack/plugins/ux/public/context/url_params_context/url_params_context.test.tsx

@@ -11,6 +11,7 @@ import { History, Location } from 'history';
 import moment from 'moment-timezone';
 import * as React from 'react';
 import { MemoryRouter, Router } from 'react-router-dom';
+import { CompatRouter } from 'react-router-dom-v5-compat';
 import type { UrlParams } from './types';
 import { UrlParamsContext, UrlParamsProvider } from './url_params_context';
 
@@ -164,6 +165,7 @@ describe('UrlParamsContext', () => {
 
     const wrapper = mount(
       <Router history={history}>
+        <CompatRouter>
           <UrlParamsProvider>
             <UrlParamsContext.Consumer>
               {({ urlParams, refreshTimeRange }) => {
@@ -183,6 +185,7 @@ describe('UrlParamsContext', () => {
               }}
             </UrlParamsContext.Consumer>
           </UrlParamsProvider>
+        </CompatRouter>
       </Router>
     );
 

x-pack/plugins/watcher/public/application/app.tsx

@@ -18,6 +18,7 @@ import {
 import type { SettingsStart } from '@kbn/core-ui-settings-browser';
 
 import { Router, Switch, Redirect, withRouter, RouteComponentProps } from 'react-router-dom';
+import { CompatRouter } from 'react-router-dom-v5-compat';
 
 import { Route } from '@kbn/shared-ux-router';
 
@@ -67,11 +68,13 @@ export const App = (deps: AppDeps) => {
   }
   return (
     <Router history={deps.history}>
+      <CompatRouter>
         <ShareRouter>
           <AppContextProvider value={deps}>
             <AppWithoutRouter />
           </AppContextProvider>
         </ShareRouter>
+      </CompatRouter>
     </Router>
   );
 };

x-pack/test/functional_with_es_ssl/plugins/alerts/public/application.tsx

@@ -7,7 +7,8 @@
 
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { BrowserRouter as Router, RouteComponentProps } from 'react-router-dom';
+import { BrowserRouter as Router } from 'react-router-dom';
+import { CompatRouter } from 'react-router-dom-v5-compat';
 import { Route } from '@kbn/shared-ux-router';
 
 import { EuiPage, EuiText } from '@elastic/eui';
@@ -21,10 +22,11 @@ const AlertingExampleApp = (deps: AlertingExampleComponentParams) => {
   const { basename } = deps;
   return (
     <Router basename={basename}>
+      <CompatRouter>
         <EuiPage>
           <Route
             path={`/rule/:id`}
-          render={(props: RouteComponentProps<{ id: string }>) => {
+            render={(props) => {
               return (
                 <EuiText data-test-subj="noop-title">
                   <h2>View Rule {props.match.params.id}</h2>
@@ -33,6 +35,7 @@ const AlertingExampleApp = (deps: AlertingExampleComponentParams) => {
             }}
           />
         </EuiPage>
+      </CompatRouter>
     </Router>
   );
 };

x-pack/test/functional_with_es_ssl/plugins/cases/public/application.tsx

@@ -17,6 +17,7 @@ import {
   EuiFlexGroup,
 } from '@elastic/eui';
 import { Router } from 'react-router-dom';
+import { CompatRouter } from 'react-router-dom-v5-compat';
 import { AppMountParameters, CoreStart } from '@kbn/core/public';
 import { CasesUiStart } from '@kbn/cases-plugin/public';
 import { CommentType } from '@kbn/cases-plugin/common';
@@ -110,9 +111,11 @@ const CasesFixtureApp: React.FC<{ deps: RenderAppProps }> = ({ deps }) => {
           >
             <StyledComponentsThemeProvider>
               <Router history={history}>
+                <CompatRouter>
                   <CasesContext owner={[]} permissions={permissions}>
                     <CasesFixtureAppWithContext cases={cases} />
                   </CasesContext>
+                </CompatRouter>
               </Router>
             </StyledComponentsThemeProvider>
           </KibanaContextProvider>

x-pack/test/plugin_functional/plugins/resolver_test/public/applications/resolver_test/index.tsx

@@ -6,6 +6,7 @@
  */
 
 import { Router } from 'react-router-dom';
+import { CompatRouter } from 'react-router-dom-v5-compat';
 
 import React from 'react';
 import ReactDOM from 'react-dom';
@@ -77,6 +78,7 @@ const AppRoot = React.memo(
     return (
       <I18nProvider>
         <Router history={parameters.history}>
+          <CompatRouter>
             <KibanaContextProvider services={coreStart}>
               <Provider store={store}>
                 <Wrapper>
@@ -90,6 +92,7 @@ const AppRoot = React.memo(
                 </Wrapper>
               </Provider>
             </KibanaContextProvider>
+          </CompatRouter>
         </Router>
       </I18nProvider>
     );

yarn.lock

@@ -1185,7 +1185,7 @@
     core-js-pure "^3.25.1"
     regenerator-runtime "^0.13.10"
 
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.0", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.15.4", "@babel/runtime@^7.17.8", "@babel/runtime@^7.18.3", "@babel/runtime@^7.21.0", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.4", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.3", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.0", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.15.4", "@babel/runtime@^7.17.8", "@babel/runtime@^7.18.3", "@babel/runtime@^7.21.0", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.4", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.3", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
   version "7.21.0"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.21.0.tgz#5b55c9d394e5fcf304909a8b00c07dc217b56673"
   integrity sha512-xwII0//EObnq89Ji5AKYQaRYiW/nZ3llSv29d49IuxPhKbtJoLP+9QUUZ4nVragQVtaVGeZrpB+ZtG/Pdy/POw==
@@ -6779,6 +6779,11 @@
     redux-thunk "^2.4.1"
     reselect "^4.1.5"
 
+"@remix-run/router@1.6.3":
+  version "1.6.3"
+  resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.6.3.tgz#8205baf6e17ef93be35bf62c37d2d594e9be0dad"
+  integrity sha512-EXJysQ7J3veRECd0kZFQwYYd5sJMcq2O/m60zu1W2l3oVQ9xtub8jTOtYRE0+M2iomyG/W3Ps7+vp2kna0C27Q==
+
 "@samverschueren/stream-to-observable@^0.3.0":
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/@samverschueren/stream-to-observable/-/stream-to-observable-0.3.0.tgz#ecdf48d532c58ea477acfcab80348424f8d0662f"
@@ -8606,15 +8611,10 @@
   resolved "https://registry.yarnpkg.com/@types/he/-/he-1.1.1.tgz#19e14033c4ee8f1a702c74dcc6182664839ac2b7"
   integrity sha512-jpzrsR1ns0n3kyWt92QfOUQhIuJGQ9+QGa7M62rO6toe98woQjnsnzjdMtsQXCdvjjmqjS2ZBCC7xKw0cdzU+Q==
 
-"@types/history@*":
+"@types/history@^4.7.9", "@types/history@^4.7.11":
-  version "4.7.3"
+  version "4.7.11"
-  resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.3.tgz#856c99cdc1551d22c22b18b5402719affec9839a"
+  resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.11.tgz#56588b17ae8f50c53983a524fc3cc47437969d64"
-  integrity sha512-cS5owqtwzLN5kY+l+KgKdRJ/Cee8tlmQoGQuIE9tWnSmS3JMKzmxo2HIAk2wODMifGwO20d62xZQLYz+RLfXmw==
+  integrity sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA==
-
-"@types/history@^4.7.9":
-  version "4.7.9"
-  resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.9.tgz#1cfb6d60ef3822c589f18e70f8b12f9a28ce8724"
-  integrity sha512-MUc6zSmU3tEVnkQ78q0peeEjKWPUADMlC/t++2bI8WnAG2tvYRPIgHG8lWkXwqc8MsUF6Z2MOf+Mh5sazOmhiQ==
 
 "@types/hjson@^2.4.2":
   version "2.4.2"
@@ -9216,30 +9216,30 @@
     hoist-non-react-statics "^3.3.0"
     redux "^4.0.0"
 
-"@types/react-router-config@^5.0.2":
+"@types/react-router-config@^5.0.7":
-  version "5.0.2"
+  version "5.0.7"
-  resolved "https://registry.yarnpkg.com/@types/react-router-config/-/react-router-config-5.0.2.tgz#4d3b52e71ed363a1976a12321e67b09a99ad6d10"
+  resolved "https://registry.yarnpkg.com/@types/react-router-config/-/react-router-config-5.0.7.tgz#36207a3fe08b271abee62b26993ee932d13cbb02"
-  integrity sha512-WOSetDV3YPxbkVJAdv/bqExJjmcdCi/vpCJh3NfQOy1X15vHMSiMioXIcGekXDJJYhqGUMDo9e337mh508foAA==
+  integrity sha512-pFFVXUIydHlcJP6wJm7sDii5mD/bCmmAY0wQzq+M+uX7bqS95AQqHZWP1iNMKrWVQSuHIzj5qi9BvrtLX2/T4w==
   dependencies:
-    "@types/history" "*"
+    "@types/history" "^4.7.11"
+    "@types/react" "*"
+    "@types/react-router" "^5.1.0"
+
+"@types/react-router-dom@^5.3.3":
+  version "5.3.3"
+  resolved "https://registry.yarnpkg.com/@types/react-router-dom/-/react-router-dom-5.3.3.tgz#e9d6b4a66fcdbd651a5f106c2656a30088cc1e83"
+  integrity sha512-kpqnYK4wcdm5UaWI3fLcELopqLrHgLqNsdpHauzlQktfkHL3npOSwtj1Uz9oKBAzs7lFtVkV8j83voAz2D8fhw==
+  dependencies:
+    "@types/history" "^4.7.11"
     "@types/react" "*"
     "@types/react-router" "*"
 
-"@types/react-router-dom@^5.1.5":
+"@types/react-router@*", "@types/react-router@^5.1.0", "@types/react-router@^5.1.20":
-  version "5.1.5"
+  version "5.1.20"
-  resolved "https://registry.yarnpkg.com/@types/react-router-dom/-/react-router-dom-5.1.5.tgz#7c334a2ea785dbad2b2dcdd83d2cf3d9973da090"
+  resolved "https://registry.yarnpkg.com/@types/react-router/-/react-router-5.1.20.tgz#88eccaa122a82405ef3efbcaaa5dcdd9f021387c"
-  integrity sha512-ArBM4B1g3BWLGbaGvwBGO75GNFbLDUthrDojV2vHLih/Tq8M+tgvY1DSwkuNrPSwdp/GUL93WSEpTZs8nVyJLw==
+  integrity sha512-jGjmu/ZqS7FjSH6owMcD5qpq19+1RS9DeVRqfl1FeBMxTDQAGwlMWOcs52NDoXaNKyG3d1cYQFMs9rCrb88o9Q==
   dependencies:
-    "@types/history" "*"
+    "@types/history" "^4.7.11"
-    "@types/react" "*"
-    "@types/react-router" "*"
-
-"@types/react-router@*", "@types/react-router@^5.1.7":
-  version "5.1.7"
-  resolved "https://registry.yarnpkg.com/@types/react-router/-/react-router-5.1.7.tgz#e9d12ed7dcfc79187e4d36667745b69a5aa11556"
-  integrity sha512-2ouP76VQafKjtuc0ShpwUebhHwJo0G6rhahW9Pb8au3tQTjYXd2jta4wv6U2tGLR/I42yuG00+UXjNYY0dTzbg==
-  dependencies:
-    "@types/history" "*"
     "@types/react" "*"
 
 "@types/react-syntax-highlighter@^15.4.0":
@@ -17528,6 +17528,13 @@ history@^4.9.0:
     tiny-warning "^1.0.0"
     value-equal "^0.4.0"
 
+history@^5.3.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/history/-/history-5.3.0.tgz#1548abaa245ba47992f063a0783db91ef201c73b"
+  integrity sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==
+  dependencies:
+    "@babel/runtime" "^7.7.6"
+
 hjson@3.2.1:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/hjson/-/hjson-3.2.1.tgz#20de41dc87fc9a10d1557d0230b0e02afb1b09ac"
@@ -21401,14 +21408,6 @@ min-indent@^1.0.0:
   resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.0.tgz#cfc45c37e9ec0d8f0a0ec3dd4ef7f7c3abe39256"
   integrity sha1-z8RcN+nsDY8KDsPdTvf3w6vjklY=
 
-mini-create-react-context@^0.4.0:
-  version "0.4.1"
-  resolved "https://registry.yarnpkg.com/mini-create-react-context/-/mini-create-react-context-0.4.1.tgz#072171561bfdc922da08a60c2197a497cc2d1d5e"
-  integrity sha512-YWCYEmd5CQeHGSAKrYvXgmzzkrvssZcuuQDDeqkT+PziKGMgE+0MCCtcKbROzocGBG1meBLl2FotlRwf4gAzbQ==
-  dependencies:
-    "@babel/runtime" "^7.12.1"
-    tiny-warning "^1.0.3"
-
 mini-css-extract-plugin@1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-1.1.0.tgz#dcc2f0bfbec660c0bd1200ff7c8f82deec2cc8a6"
@@ -24689,35 +24688,49 @@ react-router-config@^5.1.1:
   dependencies:
     "@babel/runtime" "^7.1.2"
 
-react-router-dom@^5.2.0:
+react-router-dom-v5-compat@^6.12.0:
-  version "5.2.0"
+  version "6.12.0"
-  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.2.0.tgz#9e65a4d0c45e13289e66c7b17c7e175d0ea15662"
+  resolved "https://registry.yarnpkg.com/react-router-dom-v5-compat/-/react-router-dom-v5-compat-6.12.0.tgz#d5b1df5dafce6120626e568fb3d827353941c026"
-  integrity sha512-gxAmfylo2QUjcwxI63RhQ5G85Qqt4voZpUXSEqCwykV0baaOTQDR1f0PmY8AELqIyVc0NEZUj0Gov5lNGcXgsA==
+  integrity sha512-ewEx9QaGOPIEGhd7Y43xLBscqab1Et2LjAoCZo65jRB/naJypZpsqqJfzXRZax0PLNHebl/nACDvp3abxx565Q==
   dependencies:
-    "@babel/runtime" "^7.1.2"
+    history "^5.3.0"
+    react-router "6.12.0"
+
+react-router-dom@^5.3.4:
+  version "5.3.4"
+  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.3.4.tgz#2ed62ffd88cae6db134445f4a0c0ae8b91d2e5e6"
+  integrity sha512-m4EqFMHv/Ih4kpcBCONHbkT68KoAeHN4p3lAGoNryfHi0dMy0kCzEZakiKRsvg5wHZ/JLrLW8o8KomWiz/qbYQ==
+  dependencies:
+    "@babel/runtime" "^7.12.13"
     history "^4.9.0"
     loose-envify "^1.3.1"
     prop-types "^15.6.2"
-    react-router "5.2.0"
+    react-router "5.3.4"
     tiny-invariant "^1.0.2"
     tiny-warning "^1.0.0"
 
-react-router@5.2.0, react-router@^5.2.0:
+react-router@5.3.4, react-router@^5.3.4:
-  version "5.2.0"
+  version "5.3.4"
-  resolved "https://registry.yarnpkg.com/react-router/-/react-router-5.2.0.tgz#424e75641ca8747fbf76e5ecca69781aa37ea293"
+  resolved "https://registry.yarnpkg.com/react-router/-/react-router-5.3.4.tgz#8ca252d70fcc37841e31473c7a151cf777887bb5"
-  integrity sha512-smz1DUuFHRKdcJC0jobGo8cVbhO3x50tCL4icacOlcwDOEQPq4TMqwx3sY1TP+DvtTgz4nm3thuo7A+BK2U0Dw==
+  integrity sha512-Ys9K+ppnJah3QuaRiLxk+jDWOR1MekYQrlytiXxC1RyfbdsZkS5pvKAzCCr031xHixZwpnsYNT5xysdFHQaYsA==
   dependencies:
-    "@babel/runtime" "^7.1.2"
+    "@babel/runtime" "^7.12.13"
     history "^4.9.0"
     hoist-non-react-statics "^3.1.0"
     loose-envify "^1.3.1"
-    mini-create-react-context "^0.4.0"
     path-to-regexp "^1.7.0"
     prop-types "^15.6.2"
     react-is "^16.6.0"
     tiny-invariant "^1.0.2"
     tiny-warning "^1.0.0"
 
+react-router@6.12.0:
+  version "6.12.0"
+  resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.12.0.tgz#1afae9219c24c8611809469d7a386c8023ade39a"
+  integrity sha512-/tCGtLq9umxRvbYeIx3j94CmpQfue0E3qnetVm9luKhu58cR4t+3O4ZrQXBdXfJrBATOAj+wF/1ihJJQI8AoTw==
+  dependencies:
+    "@remix-run/router" "1.6.3"
+
 react-select@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/react-select/-/react-select-3.2.0.tgz#de9284700196f5f9b5277c5d850a9ce85f5c72fe"
@@ -27752,7 +27765,7 @@ tiny-invariant@^1.0.2, tiny-invariant@^1.0.6:
   resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.0.6.tgz#b3f9b38835e36a41c843a3b0907a5a7b3755de73"
   integrity sha512-FOyLWWVjG+aC0UqG76V53yAWdXfH8bO6FNmyZOuUrzDzK8DI3/JRY25UD7+g49JWM1LXwymsKERB+DzI0dTEQA==
 
-tiny-warning@^1.0.0, tiny-warning@^1.0.2, tiny-warning@^1.0.3:
+tiny-warning@^1.0.0, tiny-warning@^1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
   integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==