grafana · leventebalogh · Feb 7, 2025 · Nov 26, 2024 · Dec 16, 2024 · Dec 17, 2024
diff --git a/packages/scenes-app/.config/webpack/webpack.config.ts b/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',

diff --git a/packages/scenes-app/package.json b/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",
@@ -73,7 +72,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}": [

diff --git a/packages/scenes-app/src/components/App/App.tsx b/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>
     );
   }

diff --git a/packages/scenes-app/src/components/Routes/Routes.tsx b/packages/scenes-app/src/components/Routes/Routes.tsx
@@ -1,20 +1,18 @@
 import * as React from 'react';
-import { 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';
 import { HomePage } from '../../home-demo/HomeApp';
 
-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} />
-      <Route path={prefixRoute(`${ROUTES.Home}`)} component={HomePage} />
-    </Switch>
+    <Routes>
+      <Route path={`${ROUTES.Demos}/*`} Component={DemoListPage} />
+      <Route path={`${ROUTES.GrafanaMonitoring}/*`} Component={GrafanaMonitoringApp} />
+      <Route path={`${ROUTES.ReactDemo}/*`} Component={ReactDemoPage} />
+      <Route path="*" Component={HomePage} />
+    </Routes>
   );
-};
+}
diff --git a/packages/scenes-app/src/demos/adhocFiltersDemo.tsx b/packages/scenes-app/src/demos/adhocFiltersDemo.tsx
@@ -27,6 +27,7 @@ export function getAdhocFiltersDemo(defaults: SceneAppPageState) {
       new SceneAppPage({
         title: 'Apply mode auto',
         url: `${defaults.url}/auto`,
+        routePath: `auto`,
         getScene: () => {
           return new EmbeddedScene({
             ...getEmbeddedSceneDefaults(),
@@ -70,6 +71,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',
@@ -125,6 +127,7 @@ export function getAdhocFiltersDemo(defaults: SceneAppPageState) {
       new SceneAppPage({
         title: 'Vertical Variants',
         url: `${defaults.url}/vertical`,
+        routePath: `vertical`,
         getScene: () => {
           return new EmbeddedScene({
             ...getEmbeddedSceneDefaults(),
@@ -198,6 +201,7 @@ export function getAdhocFiltersDemo(defaults: SceneAppPageState) {
       }),
       new SceneAppPage({
         title: 'New Filters UI',
+        routePath: `new-filters`,
         url: `${defaults.url}/new-filters`,
         getScene: () => {
           return new EmbeddedScene({

diff --git a/packages/scenes-app/src/demos/cursorSync.tsx b/packages/scenes-app/src/demos/cursorSync.tsx
@@ -16,6 +16,7 @@ export function global() {
   return new SceneAppPage({
     title: 'Global sync scope',
     url: demoUrl('cursor-sync'),
+    routePath: 'cursor-sync/*',
     getScene: () => {
       return new EmbeddedScene({
         ...getEmbeddedSceneDefaults(),
@@ -75,6 +76,7 @@ export function scoped() {
   return new SceneAppPage({
     title: 'Cursor sync test',
     url: demoUrl('cursor-sync/scoped'),
+    routePath: 'scoped',
     getScene: () => {
       return new EmbeddedScene({
         ...getEmbeddedSceneDefaults(),

diff --git a/packages/scenes-app/src/demos/docs-examples.tsx b/packages/scenes-app/src/demos/docs-examples.tsx
@@ -117,6 +117,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,
   });

diff --git a/packages/scenes-app/src/demos/dynamicPage.tsx b/packages/scenes-app/src/demos/dynamicPage.tsx
@@ -28,6 +28,7 @@ export function getDynamicPageDemo(defaults: SceneAppPageState): SceneAppPage {
       new SceneAppPage({
         title: 'Loading...',
         url: '',
+        routePath: '*',
         getScene: () =>
           new EmbeddedScene({
             body: new SceneReactObject({
@@ -60,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({

diff --git a/packages/scenes-app/src/demos/nestedVariables.tsx b/packages/scenes-app/src/demos/nestedVariables.tsx
@@ -43,6 +43,7 @@ export function getNestedScenesAndVariablesDemo(defaults: SceneAppPageState) {
       new SceneAppPage({
         title: 'Overview',
         url: `${defaults.url}/overview`,
+        routePath: 'overview',
         getScene: () => {
           return new EmbeddedScene({
             ...getEmbeddedSceneDefaults(),

diff --git a/packages/scenes-app/src/demos/split.tsx b/packages/scenes-app/src/demos/split.tsx
@@ -22,6 +22,7 @@ const basicDemo = () =>
   new SceneAppPage({
     title: 'Split layout test',
     url: demoUrl('split-layout'),
+    routePath: 'split-layout/*',
     getScene: () => {
       return new EmbeddedScene({
         ...getEmbeddedSceneDefaults(),
@@ -193,6 +194,7 @@ const dynamicSplitDemo = () =>
   new SceneAppPage({
     title: 'Dynamic split layout test',
     url: demoUrl('split-layout/dynamic'),
+    routePath: 'dynamic',
     getScene: getDynamicSplitScene,
   });
 

diff --git a/packages/scenes-app/src/demos/urlSyncTest.tsx b/packages/scenes-app/src/demos/urlSyncTest.tsx
@@ -33,6 +33,7 @@ export function getUrlSyncTest(defaults: SceneAppPageState) {
       new SceneAppPage({
         title: 'First',
         url: `${defaults.url}/first`,
+        routePath: 'first',
         getScene: () => {
           return new EmbeddedScene({
             controls: [new VariableValueSelectors({})],
@@ -56,6 +57,7 @@ export function getUrlSyncTest(defaults: SceneAppPageState) {
       new SceneAppPage({
         title: 'Second',
         url: `${defaults.url}/manual`,
+        routePath: 'manual',
         getScene: () => {
           return new EmbeddedScene({
             controls: [new VariableValueSelectors({})],

diff --git a/packages/scenes-app/src/demos/variables.tsx b/packages/scenes-app/src/demos/variables.tsx
@@ -33,6 +33,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({})],
@@ -115,6 +116,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({})],
@@ -157,6 +159,7 @@ export function getVariablesDemo(defaults: SceneAppPageState) {
       new SceneAppPage({
         title: 'Search filter',
         url: `${defaults.url}/search`,
+        routePath: 'search',
         getScene: () => {
           return new EmbeddedScene({
             controls: [new VariableValueSelectors({})],
@@ -190,6 +193,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({})],
@@ -223,6 +227,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({})],

diff --git a/packages/scenes-app/src/demos/withDrilldown/WithDrilldown.tsx b/packages/scenes-app/src/demos/withDrilldown/WithDrilldown.tsx
@@ -52,26 +52,29 @@ export function getDrilldownsAppPageScene(defaults: SceneAppPageState) {
     getScene,
     drilldowns: [
       {
-        routePath: `${defaults.url}/room/:roomName`,
+        routePath: `room/:roomName/*`,
         getPage(routeMatch, parent) {
           const roomName = routeMatch.params.roomName;
 
           return new SceneAppPage({
             url: `${defaults.url}/room/${roomName}/temperature`,
+            routePath: `room/:roomName/*`,
             title: `${roomName}`,
             subTitle: 'This scene is a particular room drilldown. It implements two tabs to organise the data.',
             getParentPage: () => parent,
             tabs: [
               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),
               }),

diff --git a/packages/scenes-app/src/home-demo/HomeApp.tsx b/packages/scenes-app/src/home-demo/HomeApp.tsx
@@ -1,11 +1,10 @@
 import React from 'react';
 import { Card, useStyles2 } from '@grafana/ui';
-import { useHistory } from 'react-router-dom';
 import { prefixRoute } from '../utils/utils.routing';
 import { ROUTES } from '../constants';
 import { GrafanaTheme2, PageLayoutType } from '@grafana/data';
 import { css } from '@emotion/css';
-import { PluginPage } from '@grafana/runtime';
+import { PluginPage, locationService } from '@grafana/runtime';
 
 function getStyles(theme: GrafanaTheme2) {
   return {
@@ -29,9 +28,10 @@ function getStyles(theme: GrafanaTheme2) {
   };
 }
 
+const history = locationService.getHistory();
+
 export const HomePage = () => {
   const styles = useStyles2(getStyles);
-  const history = useHistory();
 
   return (
     <PluginPage layout={PageLayoutType.Custom}>

diff --git a/packages/scenes-app/src/monitoring-app/GrafanaMonitoringApp.tsx b/packages/scenes-app/src/monitoring-app/GrafanaMonitoringApp.tsx
@@ -30,18 +30,21 @@ export function getMainPageScene() {
     title: 'Grafana Monitoring',
     subTitle: 'A custom app with embedded scenes to monitor your Grafana server',
     url: prefixRoute('grafana-monitoring'),
+    routePath: 'grafana-monitoring/*',
     hideFromBreadcrumbs: false,
     getScene: getOverviewScene,
     tabs: [
       new SceneAppPage({
         title: 'Overview',
         url: prefixRoute('grafana-monitoring'),
+        routePath: '',
         getScene: getOverviewScene,
         preserveUrlKeys: ['from', 'to', 'var-instance'],
       }),
       new SceneAppPage({
         title: 'HTTP handlers',
         url: prefixRoute('grafana-monitoring/handlers'),
+        routePath: 'handlers/*',
         getScene: getHttpHandlerListScene,
         preserveUrlKeys: ['from', 'to', 'var-instance'],
         drilldowns: [
@@ -54,12 +57,14 @@ export function getMainPageScene() {
       new SceneAppPage({
         title: 'Traffic',
         url: prefixRoute('grafana-monitoring/traffic'),
+        routePath: 'traffic',
         getScene: getTrafficScene,
         preserveUrlKeys: ['from', 'to', 'var-instance'],
       }),
       new SceneAppPage({
         title: 'Logs',
         url: prefixRoute('grafana-monitoring/logs'),
+        routePath: 'logs',
         getScene: getOverviewLogsScene,
         preserveUrlKeys: ['from', 'to', 'var-instance'],
       }),
@@ -78,18 +83,21 @@ export function getHandlerDrilldownPage(
     title: handler,
     subTitle: 'A grafana http handler is responsible for service a specific API request',
     url: baseUrl,
+    routePath: `${encodeURIComponent(handler)}/*`,
     getParentPage: () => parent,
     getScene: () => getHandlerDetailsScene(handler),
     tabs: [
       new SceneAppPage({
         title: 'Metrics',
         url: baseUrl,
+        routePath: '',
         getScene: () => getHandlerDetailsScene(handler),
         preserveUrlKeys: ['from', 'to', 'var-instance'],
       }),
       new SceneAppPage({
         title: 'Logs',
         url: baseUrl + '/logs',
+        routePath: 'logs',
         getScene: () => getHandlerLogsScene(handler),
         preserveUrlKeys: ['from', 'to', 'var-instance'],
       }),

diff --git a/packages/scenes-app/src/pages/DemoListPage.tsx b/packages/scenes-app/src/pages/DemoListPage.tsx
@@ -33,7 +33,8 @@ function getDemoSceneApp() {
       new SceneAppPage({
         title: 'Demos',
         key: 'SceneAppPage Demos',
-        url: prefixRoute(ROUTES.Demos),
+        url: `${prefixRoute(ROUTES.Demos)}`,
+        routePath: '*',
         preserveUrlKeys: [],
         getScene: () => {
           return new EmbeddedScene({
@@ -43,7 +44,7 @@ function getDemoSceneApp() {
         },
         drilldowns: [
           {
-            routePath: `${demoUrl(':demo')}`,
+            routePath: `:demo/*`,
             getPage: (routeMatch, parent) => {
               const demos = getDemos();
               const demoSlug = decodeURIComponent(routeMatch.params.demo);
@@ -59,6 +60,7 @@ function getDemoSceneApp() {
                   <DemoSubTitle text={demoInfo.description} getSourceCodeModule={demoInfo.getSourceCodeModule} />
                 ),
                 url: `${demoUrl(slugify(demoInfo.title))}`,
+                routePath: `${slugify(demoInfo.title)}/*`,
                 getParentPage: () => parent,
               });
             },
@@ -167,6 +169,7 @@ export function getDemoNotFoundPage(url: string): SceneAppPage {
     title: 'Demo not found',
     subTitle: 'So sorry sir but the demo cannot be found.',
     url: url,
+    routePath: '',
     getScene: () => {
       return new EmbeddedScene({
         body: new SceneFlexLayout({

diff --git a/packages/scenes-app/src/react-demo/DrilldownDemoPage.tsx b/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';
 import { DemoSubTitle } from '../pages/DemoSubTitle';
 
@@ -16,10 +16,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>
   );
 }