React Router: start migrating to v6 (#66921)

Chore: add the react-router-compat package

public/app/AppWrapper.tsx

@@ -1,7 +1,8 @@
 import { Action, KBarProvider } from 'kbar';
 import React, { ComponentType } from 'react';
 import { Provider } from 'react-redux';
-import { Router, Route, Redirect, Switch } from 'react-router-dom';
+import { Router, Redirect, Switch, RouteComponentProps } from 'react-router-dom';
+import { CompatRouter, CompatRoute } from 'react-router-dom-v5-compat';
 
 import { config, locationService, navigationLogger, reportInteraction } from '@grafana/runtime';
 import { ErrorBoundaryAlert, GlobalStyles, ModalRoot, ModalsProvider, PortalContainer } from '@grafana/ui';
@@ -56,12 +57,12 @@ export class AppWrapper extends React.Component<AppWrapperProps, AppWrapperState
     const roles = route.roles ? route.roles() : [];
 
     return (
-      <Route
+      <CompatRoute
         exact={route.exact === undefined ? true : route.exact}
         sensitive={route.sensitive === undefined ? false : route.sensitive}
         path={route.path}
         key={route.path}
-        render={(props) => {
+        render={(props: RouteComponentProps) => {
           // TODO[Router]: test this logic
           if (roles?.length) {
             if (!roles.some((r: string) => contextSrv.hasRole(r))) {
@@ -105,17 +106,19 @@ export class AppWrapper extends React.Component<AppWrapperProps, AppWrapperState
                   <GlobalStyles />
                   <div className="grafana-app">
                     <Router history={locationService.getHistory()}>
-                      <AppChrome>
-                        {pageBanners.map((Banner, index) => (
-                          <Banner key={index.toString()} />
-                        ))}
-                        <AngularRoot />
-                        <AppNotificationList />
-                        {ready && this.renderRoutes()}
-                        {bodyRenderHooks.map((Hook, index) => (
-                          <Hook key={index.toString()} />
-                        ))}
-                      </AppChrome>
+                      <CompatRouter>
+                        <AppChrome>
+                          {pageBanners.map((Banner, index) => (
+                            <Banner key={index.toString()} />
+                          ))}
+                          <AngularRoot />
+                          <AppNotificationList />
+                          {ready && this.renderRoutes()}
+                          {bodyRenderHooks.map((Hook, index) => (
+                            <Hook key={index.toString()} />
+                          ))}
+                        </AppChrome>
+                      </CompatRouter>
                     </Router>
                   </div>
                   <LiveConnectionWarning />