Update to react-router@6

packages/scenes-app/.config/webpack/webpack.config.ts

@@ -47,7 +47,7 @@ const config = (env): Configuration => ({
     'react-redux',
     'redux',
     'rxjs',
-    'react-router-dom',
+    'react-router',
     'd3',
     'angular',
     '@grafana/ui',

packages/scenes-app/package.json

@@ -29,7 +29,6 @@
     "@testing-library/react": "^12.1.3",
     "@types/jest": "^29.5.12",
     "@types/node": "^20.11.30",
-    "@types/react-router-dom": "^5.3.3",
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "@typescript-eslint/parser": "^4.33.0",
     "copy-webpack-plugin": "^10.0.0",
@@ -70,7 +69,7 @@
     "@types/lodash": "latest",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-router-dom": "^5.2.0"
+    "react-router-dom": "^6.28.0"
   },
   "lint-staged": {
     "*.{js,ts,tsx}": [

packages/scenes-app/src/components/App/App.tsx

@@ -1,13 +1,13 @@
 import * as React from 'react';
 import { AppRootProps } from '@grafana/data';
 import { PluginPropsContext } from '../../utils/utils.plugin';
-import { Routes } from '../Routes';
+import { AppRoutes } from '../Routes';
 
 export class App extends React.PureComponent<AppRootProps> {
   render() {
     return (
       <PluginPropsContext.Provider value={this.props}>
-        <Routes />
+        <AppRoutes />
       </PluginPropsContext.Provider>
     );
   }

packages/scenes-app/src/components/Routes/Routes.tsx

@@ -1,19 +1,17 @@
 import * as React from 'react';
-import { Redirect, Route, Switch } from 'react-router-dom';
-import { prefixRoute } from '../../utils/utils.routing';
+import { Route, Routes } from 'react-router-dom';
 import { ROUTES } from '../../constants';
 import { DemoListPage } from '../../pages/DemoListPage';
 import GrafanaMonitoringApp from '../../monitoring-app/GrafanaMonitoringApp';
 import { ReactDemoPage } from '../../react-demo/Home';
 
-export const Routes = () => {
+export function AppRoutes() {
   return (
-    <Switch>
-      {/* Default page */}
-      <Route path={prefixRoute(`${ROUTES.Demos}`)} component={DemoListPage} />
-      <Route path={prefixRoute(`${ROUTES.GrafanaMonitoring}`)} component={GrafanaMonitoringApp} />
-      <Route path={prefixRoute(`${ROUTES.ReactDemo}`)} component={ReactDemoPage} />
-      <Redirect to={prefixRoute(ROUTES.Demos)} />
-    </Switch>
+    <Routes>
+      <Route path={`${ROUTES.Demos}/*`} Component={DemoListPage} />
+      <Route path={`${ROUTES.GrafanaMonitoring}/*`} Component={GrafanaMonitoringApp} />
+      <Route path={`${ROUTES.ReactDemo}/*`} Component={ReactDemoPage} />
+      {/* <Redirect to={prefixRoute(ROUTES.Demos)} /> */}
+    </Routes>
   );
-};
+}

packages/scenes-app/src/demos/adhocFiltersDemo.tsx

@@ -30,6 +30,7 @@ export function getAdhocFiltersDemo(defaults: SceneAppPageState) {
       new SceneAppPage({
         title: 'Apply mode auto',
         url: `${defaults.url}/auto`,
+        routePath: `auto`,
         getScene: () => {
           return new EmbeddedScene({
             ...getEmbeddedSceneDefaults(),
@@ -73,6 +74,7 @@ export function getAdhocFiltersDemo(defaults: SceneAppPageState) {
       new SceneAppPage({
         title: 'Apply mode manual',
         url: `${defaults.url}/manual`,
+        routePath: `manual`,
         getScene: () => {
           const filtersVar = new AdHocFiltersVariable({
             applyMode: 'manual',
@@ -128,6 +130,7 @@ export function getAdhocFiltersDemo(defaults: SceneAppPageState) {
       new SceneAppPage({
         title: 'Vertical Variants',
         url: `${defaults.url}/vertical`,
+        routePath: `vertical`,
         getScene: () => {
           return new EmbeddedScene({
             ...getEmbeddedSceneDefaults(),
@@ -201,6 +204,7 @@ export function getAdhocFiltersDemo(defaults: SceneAppPageState) {
       }),
       new SceneAppPage({
         title: 'New Filters UI',
+        routePath: `new-filters`,
         url: `${defaults.url}/new-filters`,
         getScene: () => {
           return new EmbeddedScene({

packages/scenes-app/src/demos/cursorSync.tsx

@@ -75,6 +75,7 @@ export function scoped() {
   return new SceneAppPage({
     title: 'Cursor sync test',
     url: demoUrl('cursor-sync/scoped'),
+    routePath: 'scoped',
     getScene: () => {
       return new EmbeddedScene({
         ...getEmbeddedSceneDefaults(),

packages/scenes-app/src/demos/docs-examples.tsx

@@ -118,6 +118,7 @@ export function getDocsExamples(defaults: SceneAppPageState) {
 function getDocsExample(getScene: () => EmbeddedScene, url: string, title: string) {
   return new SceneAppPage({
     title,
+    routePath: url,
     url: demoUrl(`docs-examples/${url}`),
     getScene,
   });

packages/scenes-app/src/demos/dynamicPage.tsx

@@ -61,6 +61,7 @@ export function getDynamicPageDemo(defaults: SceneAppPageState): SceneAppPage {
 function getSceneAppPage(url: string, name: string) {
   return new SceneAppPage({
     title: name,
+    routePath: url,
     url: `${demoUrl('dynamic-page')}${url}`,
     getScene: () => {
       return new EmbeddedScene({

packages/scenes-app/src/demos/split.tsx

@@ -193,6 +193,7 @@ const dynamicSplitDemo = () =>
   new SceneAppPage({
     title: 'Dynamic split layout test',
     url: demoUrl('split-layout/dynamic'),
+    routePath: 'dynamic',
     getScene: getDynamicSplitScene,
   });
 

packages/scenes-app/src/demos/urlSyncTest.tsx

@@ -34,6 +34,7 @@ export function getUrlSyncTest(defaults: SceneAppPageState) {
       new SceneAppPage({
         title: 'First',
         url: `${defaults.url}/first`,
+        routePath: 'first',
         getScene: () => {
           return new EmbeddedScene({
             controls: [new VariableValueSelectors({})],
@@ -57,6 +58,7 @@ export function getUrlSyncTest(defaults: SceneAppPageState) {
       new SceneAppPage({
         title: 'Second',
         url: `${defaults.url}/manual`,
+        routePath: 'manual',
         getScene: () => {
           return new EmbeddedScene({
             controls: [new VariableValueSelectors({})],

packages/scenes-app/src/demos/variables.tsx

@@ -34,6 +34,7 @@ export function getVariablesDemo(defaults: SceneAppPageState) {
       new SceneAppPage({
         title: 'Async and chained',
         url: `${defaults.url}/query`,
+        routePath: 'query',
         getScene: () => {
           return new EmbeddedScene({
             controls: [new VariableValueSelectors({})],
@@ -116,6 +117,7 @@ export function getVariablesDemo(defaults: SceneAppPageState) {
       new SceneAppPage({
         title: 'Data source and textbox',
         url: `${defaults.url}/ds`,
+        routePath: 'ds',
         getScene: () => {
           return new EmbeddedScene({
             controls: [new VariableValueSelectors({})],
@@ -158,6 +160,7 @@ export function getVariablesDemo(defaults: SceneAppPageState) {
       new SceneAppPage({
         title: 'Search filter',
         url: `${defaults.url}/search`,
+        routePath: 'search',
         getScene: () => {
           return new EmbeddedScene({
             controls: [new VariableValueSelectors({})],
@@ -191,6 +194,7 @@ export function getVariablesDemo(defaults: SceneAppPageState) {
       new SceneAppPage({
         title: 'Many variable options',
         url: `${defaults.url}/many-values`,
+        routePath: 'many-values',
         getScene: () => {
           return new EmbeddedScene({
             controls: [new VariableValueSelectors({})],
@@ -224,6 +228,7 @@ export function getVariablesDemo(defaults: SceneAppPageState) {
       new SceneAppPage({
         title: 'Many adhoc variable values',
         url: `${defaults.url}/many-adhoc-values`,
+        routePath: 'many-adhoc-values',
         getScene: () => {
           return new EmbeddedScene({
             controls: [new VariableValueSelectors({})],

packages/scenes-app/src/demos/withDrilldown/WithDrilldown.tsx

@@ -53,7 +53,7 @@ export function getDrilldownsAppPageScene(defaults: SceneAppPageState) {
     getScene,
     drilldowns: [
       {
-        routePath: `${defaults.url}/room/:roomName`,
+        routePath: `room/:roomName/*`,
         getPage(routeMatch, parent) {
           const roomName = routeMatch.params.roomName;
 
@@ -66,13 +66,15 @@ export function getDrilldownsAppPageScene(defaults: SceneAppPageState) {
               new SceneAppPage({
                 title: 'Temperature',
                 titleIcon: 'dashboard',
+                routePath: 'temperature',
                 tabSuffix: () => <Counter value={1} />,
                 url: `${defaults.url}/room/${roomName}/temperature`,
                 getScene: () => getRoomDrilldownScene(roomName),
               }),
               new SceneAppPage({
                 title: 'Humidity',
                 titleIcon: 'chart-line',
+                routePath: 'humidity',
                 url: `${defaults.url}/room/${roomName}/humidity`,
                 getScene: () => getHumidityOverviewScene(roomName),
               }),

packages/scenes-app/src/pages/DemoListPage.tsx

@@ -32,7 +32,8 @@ function getDemoSceneApp() {
       new SceneAppPage({
         title: 'Demos',
         key: 'SceneAppPage Demos',
-        url: prefixRoute(ROUTES.Demos),
+        url: `${prefixRoute(ROUTES.Demos)}`,
+        routePath: '*',
         preserveUrlKeys: [],
         getScene: () => {
           return new EmbeddedScene({
@@ -42,7 +43,7 @@ function getDemoSceneApp() {
         },
         drilldowns: [
           {
-            routePath: `${demoUrl(':demo')}`,
+            routePath: `:demo/*`,
             getPage: (routeMatch, parent) => {
               const demos = getDemos();
               const demoSlug = decodeURIComponent(routeMatch.params.demo);
@@ -54,7 +55,8 @@ function getDemoSceneApp() {
 
               return demoInfo.getPage({
                 title: demoInfo.title,
-                url: `${demoUrl(slugify(demoInfo.title))}`,
+                url: `${prefixRoute(ROUTES.Demos)}/${demoSlug}`,
+                routePath: `${slugify(demoInfo.title)}/*`,
                 getParentPage: () => parent,
               });
             },

packages/scenes-app/src/react-demo/DrilldownDemoPage.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 import { DATASOURCE_REF } from '../constants';
 import { PageWrapper } from './PageWrapper';
 import { DemoVizLayout, urlBase } from './utils';
-import { Route, Switch, useParams } from 'react-router-dom';
+import { Route, Routes, useParams } from 'react-router-dom';
 import { PlainGraphWithRandomWalk } from './PlainGraphWithRandomWalk';
 
 export function DrilldownDemoPage() {
@@ -15,10 +15,10 @@ export function DrilldownDemoPage() {
   return (
     <BreadcrumbProvider>
       <Breadcrumb text="Drilldown demo" path={`${urlBase}/drilldown`} />
-      <Switch>
-        <Route path={`${urlBase}/drilldown`} component={DrilldownHome} exact />
-        <Route path={`${urlBase}/drilldown/lib/:lib`} component={DrilldownLibraryPage} />
-      </Switch>
+      <Routes>
+        <Route path="*" element={<DrilldownHome />} />
+        <Route path="lib/:lib" element={<DrilldownLibraryPage />} />
+      </Routes>
     </BreadcrumbProvider>
   );
 }

packages/scenes-app/src/react-demo/Home.tsx

@@ -1,7 +1,7 @@
 import { SceneContextProvider, CustomVariable } from '@grafana/scenes-react';
 import { Stack, TextLink } from '@grafana/ui';
 import React from 'react';
-import { Route, Switch } from 'react-router-dom';
+import { Route, Routes } from 'react-router-dom';
 import { PlainGraphWithRandomWalk } from './PlainGraphWithRandomWalk';
 import { PageWrapper } from './PageWrapper';
 import { DynamicQueriesPage } from './DynamicQueriesPage';
@@ -21,20 +21,20 @@ export function ReactDemoPage() {
   return (
     <SceneContextProvider timeRange={{ from: 'now-1h', to: 'now' }} withQueryController>
       <CustomVariable name="env" query="dev, test, prod" initialValue="dev">
-        <Switch>
-          <Route path={`${urlBase}`} component={HomePage} exact />
-          <Route path={`${urlBase}/repeat-by-variable`} component={RepeatByVariablePage} />
-          <Route path={`${urlBase}/repeat-by-series`} component={RepeatBySeriesPage} />
-          <Route path={`${urlBase}/dynamic-queries`} component={DynamicQueriesPage} />
-          <Route path={`${urlBase}/dynamic-viz`} component={DynamicVisualiationPage} />
-          <Route path={`${urlBase}/dynamic-vars`} component={DynamicVariablesPage} />
-          <Route path={`${urlBase}/nested-context`} component={NestedContextsPage} />
-          <Route path={`${urlBase}/interpolation-hook`} component={InterpolationHookPage} />
-          <Route path={`${urlBase}/query-var-hook`} component={UseQueryVariableHookPage} />
-          <Route path={`${urlBase}/drilldown`} component={DrilldownDemoPage} />
-          <Route path={`${urlBase}/annotations`} component={AnnotationDemoPage} />
-          <Route path={`${urlBase}/transformations`} component={TransformationsDemoPage} />
-        </Switch>
+        <Routes>
+          <Route path="" Component={HomePage} />
+          <Route path={`/repeat-by-variable`} Component={RepeatByVariablePage} />
+          <Route path={`/repeat-by-series`} Component={RepeatBySeriesPage} />
+          <Route path={`/dynamic-queries`} Component={DynamicQueriesPage} />
+          <Route path={`/dynamic-viz`} Component={DynamicVisualiationPage} />
+          <Route path={`/dynamic-vars`} Component={DynamicVariablesPage} />
+          <Route path={`/nested-context`} Component={NestedContextsPage} />
+          <Route path={`/interpolation-hook`} Component={InterpolationHookPage} />
+          <Route path={`/query-var-hook`} Component={UseQueryVariableHookPage} />
+          <Route path={`/drilldown/*`} Component={DrilldownDemoPage} />
+          <Route path={`/annotations`} Component={AnnotationDemoPage} />
+          <Route path={`/transformations`} Component={TransformationsDemoPage} />
+        </Routes>
       </CustomVariable>
     </SceneContextProvider>
   );

packages/scenes-react/package.json

@@ -48,7 +48,8 @@
     "@grafana/schema": "^11.0.0",
     "@grafana/ui": "^11.0.0",
     "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react-dom": "^18.0.0",
+    "react-router-dom": "^6.28.0"
   },
   "devDependencies": {
     "@emotion/css": "11.10.5",
@@ -71,7 +72,6 @@
     "@types/react": "18.2.74",
     "@types/react-dom": "18.2.24",
     "@types/react-grid-layout": "1.3.2",
-    "@types/react-router-dom": "5.3.3",
     "@types/react-virtualized-auto-sizer": "1.0.1",
     "@types/uuid": "8.3.4",
     "@typescript-eslint/eslint-plugin": "^4.33.0",
@@ -89,7 +89,6 @@
     "jest-matcher-utils": "29.7.0",
     "lodash": "4.17.21",
     "prettier": "2.5.1",
-    "react-router-dom": "^5.2.0",
     "react-select-event": "^5.5.1",
     "rimraf": "^3.0.2",
     "rollup": "2.79.1",

packages/scenes-react/src/contexts/SceneContextProvider.test.tsx

@@ -75,10 +75,11 @@ interface SetupProps extends Partial<SceneContextProviderProps> {}
 
 function setup(props: SetupProps) {
   const result: SetupResult = {} as SetupResult;
+  const history = locationService.getHistory();
 
   result.renderResult = render(
     <LocationServiceProvider service={locationService}>
-      <Router history={locationService.getHistory()}>
+      <Router navigator={history} location={history.location}>
         <SceneContextProvider {...props}>
           <ChildTest setCtx={(c) => (result.context = c)}></ChildTest>
           <SceneContextProvider>

packages/scenes/jest.config.ts

@@ -5,7 +5,8 @@ module.exports = {
     '\\.css$': '<rootDir>/utils/test/__mocks__/style.ts',
   },
   testEnvironment: 'jsdom',
-  setupFilesAfterEnv: ['./utils/setupTests.ts'],
+  setupFiles: ['./utils/setupTests.ts'],
+  setupFilesAfterEnv: ['./utils/setupTestsAfterEnv.ts'],
   testMatch: ['<rootDir>/src/**/*.{spec,test,jest}.{js,jsx,ts,tsx}'],
   transform: {
     '^.+\\.(t|j)sx?$': [

packages/scenes/package.json

@@ -40,9 +40,10 @@
     "@floating-ui/react": "^0.26.16",
     "@leeoniya/ufuzzy": "^1.0.16",
     "@tanstack/react-virtual": "^3.9.0",
-    "react-grid-layout": "^1.3.4",
-    "react-use": "^17.5.0",
-    "react-virtualized-auto-sizer": "^1.0.24",
+    "react-grid-layout": "1.3.4",
+    "react-router-dom": "^6.28.0",
+    "react-use": "17.5.0",
+    "react-virtualized-auto-sizer": "1.0.24",
     "uuid": "^9.0.0"
   },
   "peerDependencies": {
@@ -73,7 +74,6 @@
     "@types/react": "18.2.74",
     "@types/react-dom": "18.2.24",
     "@types/react-grid-layout": "1.3.2",
-    "@types/react-router-dom": "5.3.3",
     "@types/react-virtualized-auto-sizer": "1.0.1",
     "@types/uuid": "8.3.4",
     "@typescript-eslint/eslint-plugin": "^4.33.0",
@@ -91,7 +91,6 @@
     "jest-matcher-utils": "29.7.0",
     "lodash": "4.17.21",
     "prettier": "2.5.1",
-    "react-router-dom": "^5.2.0",
     "react-select-event": "^5.5.1",
     "rimraf": "^3.0.2",
     "rollup": "2.79.1",