React Router: start migrating to v6 (#66921)

Chore: add the react-router-compat package

package.json

@@ -287,6 +287,7 @@
     "@react-stately/menu": "3.4.1",
     "@react-stately/tree": "3.3.1",
     "@reduxjs/toolkit": "1.9.3",
+    "@remix-run/router": "^1.5.0",
     "@sentry/browser": "6.19.7",
     "@sentry/types": "6.19.7",
     "@sentry/utils": "6.19.7",
@@ -384,6 +385,7 @@
     "react-resizable": "3.0.4",
     "react-responsive-carousel": "^3.2.23",
     "react-router-dom": "5.3.3",
+    "react-router-dom-v5-compat": "^6.10.0",
     "react-select": "5.7.0",
     "react-split-pane": "0.1.92",
     "react-table": "7.8.0",

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 />

public/app/features/plugins/plugin_loader.ts

@@ -8,7 +8,8 @@ import prismjs from 'prismjs';
 import react from 'react';
 import reactDom from 'react-dom';
 import * as reactRedux from 'react-redux'; // eslint-disable-line no-restricted-imports
-import * as reactRouter from 'react-router-dom';
+import * as reactRouterDom from 'react-router-dom';
+import * as reactRouterCompat from 'react-router-dom-v5-compat';
 import * as redux from 'redux';
 import * as rxjs from 'rxjs';
 import * as rxjsOperators from 'rxjs/operators';
@@ -98,7 +99,21 @@ exposeToPlugin('jquery', jquery);
 exposeToPlugin('d3', d3);
 exposeToPlugin('rxjs', rxjs);
 exposeToPlugin('rxjs/operators', rxjsOperators);
-exposeToPlugin('react-router-dom', reactRouter);
+
+// Migration - React Router v5 -> v6
+// =================================
+// Plugins that still use "react-router-dom@v5" don't depend on react-router directly, so they will not use this import.
+// (The react-router-dom@v5 that we expose for them depends on the "react-router" package internally from core.)
+//
+// Plugins that would like update to "react-router-dom@v6" will need to bundle "react-router-dom",
+// however they cannot bundle "react-router" - this would mean that we have two instances of "react-router"
+// in the app, which would casue issues. As the "react-router-dom-v5-compat" package re-exports everything from "react-router-dom@v6"
+// which then re-exports everything from "react-router@v6", we are in the lucky state to be able to expose a compatible v6 version of the router to plugins by
+// just exposing "react-router-dom-v5-compat".
+//
+// (This means that we are exposing two versions of the same package).
+exposeToPlugin('react-router', reactRouterCompat); // react-router-dom@v6, react-router@v6 (included)
+exposeToPlugin('react-router-dom', reactRouterDom); // react-router-dom@v5
 
 // Experimental modules
 exposeToPlugin('prismjs', prismjs);

yarn.lock

@@ -6886,6 +6886,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@remix-run/router@npm:1.5.0, @remix-run/router@npm:^1.5.0":
+  version: 1.5.0
+  resolution: "@remix-run/router@npm:1.5.0"
+  checksum: 9c510c174af1553edd1f039ba16e7e3d34e04d53b3bac18814660e31cd0c48297ea4291ff86d0736b560123ebc63ecb62fa525829181d16a8dad15270d6672d7
+  languageName: node
+  linkType: hard
+
 "@rollup/plugin-commonjs@npm:23.0.2":
   version: 23.0.2
   resolution: "@rollup/plugin-commonjs@npm:23.0.2"
@@ -20195,6 +20202,7 @@ __metadata:
     "@react-types/overlays": 3.6.4
     "@react-types/shared": 3.16.0
     "@reduxjs/toolkit": 1.9.3
+    "@remix-run/router": ^1.5.0
     "@rtsao/plugin-proposal-class-properties": 7.0.1-patch.1
     "@sentry/browser": 6.19.7
     "@sentry/types": 6.19.7
@@ -20406,6 +20414,7 @@ __metadata:
     react-resizable: 3.0.4
     react-responsive-carousel: ^3.2.23
     react-router-dom: 5.3.3
+    react-router-dom-v5-compat: ^6.10.0
     react-select: 5.7.0
     react-select-event: 5.5.1
     react-simple-compat: 1.2.3
@@ -20867,6 +20876,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"history@npm:^5.3.0":
+  version: 5.3.0
+  resolution: "history@npm:5.3.0"
+  dependencies:
+    "@babel/runtime": ^7.7.6
+  checksum: d73c35df49d19ac172f9547d30a21a26793e83f16a78386d99583b5bf1429cc980799fcf1827eb215d31816a6600684fba9686ce78104e23bd89ec239e7c726f
+  languageName: node
+  linkType: hard
+
 "hoist-non-react-statics@npm:3.3.2, hoist-non-react-statics@npm:^3.1.0, hoist-non-react-statics@npm:^3.3.0, hoist-non-react-statics@npm:^3.3.1, hoist-non-react-statics@npm:^3.3.2":
   version: 3.3.2
   resolution: "hoist-non-react-statics@npm:3.3.2"
@@ -31201,6 +31219,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-router-dom-v5-compat@npm:^6.10.0":
+  version: 6.10.0
+  resolution: "react-router-dom-v5-compat@npm:6.10.0"
+  dependencies:
+    history: ^5.3.0
+    react-router: 6.10.0
+  peerDependencies:
+    react: ">=16.8"
+    react-dom: ">=16.8"
+    react-router-dom: 4 || 5
+  checksum: 550c91cd5e70b8b115e965c7816694d6df19e9ac7d6c12ab4d3c805f9110d1143c8a335ba89f492d5e7e8b726309f5f907b9501b4df0f17ada3bda40a42a0800
+  languageName: node
+  linkType: hard
+
 "react-router-dom@npm:5.3.3":
   version: 5.3.3
   resolution: "react-router-dom@npm:5.3.3"
@@ -31238,6 +31270,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-router@npm:6.10.0":
+  version: 6.10.0
+  resolution: "react-router@npm:6.10.0"
+  dependencies:
+    "@remix-run/router": 1.5.0
+  peerDependencies:
+    react: ">=16.8"
+  checksum: c9fce46147c04257d7d6fa1f5bbfac96c5fdd0b15f26918bd12b2e5fe9143977c5a4452272f9b85795a22e29ec105a60d0bbe036118efc52b383d163cd8829ab
+  languageName: node
+  linkType: hard
+
 "react-select-event@npm:5.5.1":
   version: 5.5.1
   resolution: "react-select-event@npm:5.5.1"