v6.0.0

💥 Breaking Change

• @grafana/scenes-react, @grafana/scenes
  • Updating to react-router@6 #979 (@leventebalogh)

Authors: 1

• Levente Balogh (@leventebalogh)

---

Migration guide for an app plugin

Example plugin update PR →

1. Bump react-router-dom - package.json

-"react-router-dom": "^5.2.0",
+"react-router-dom": "^6.22.0",

2. Remove @types/react-router-dom - package.json

-"@types/react-router-dom": "^5.2.0",

3. Stop externalisingreact-router-dom - .config/webpack/webpack.config.ts

externals: [
      // Required for dynamic publicPath resolution
      { 'amd-module': 'module' },
      'lodash',
      'jquery',
      'moment',
      'slate',
      'emotion',
      '@emotion/react',
      '@emotion/css',
      'prismjs',
      'slate-plain-serializer',
      '@grafana/slate-react',
      'react',
      'react-dom',
      'react-redux',
      'redux',
      'rxjs',
      'react-router',
-    'react-router-dom',
      'd3',
      'angular',
      '@grafana/ui',
      '@grafana/runtime',
      '@grafana/data',

4. Enable react-router@v6 - .cprc.json
   Add the following line in the .cprc.json:

{
  "features": {
+   "useReactRouterV6": true
  }
}

4. <Route>: use relative wildcard routes

-<Route path="/a/myorg-example-app/home ... />
+<Route path="home/*" ... />

6. <Route>: use the element prop

-<Route ... component={WithDrilldown} />
+<Route ... element={<WithDrilldown />} />

7. <Switch>: replace with Routes

-import { Switch } from "react-router-dom";
+import { Routes } from "react-router-dom";  

-<Switch> ... </Switch>
+<Routes> ... </Routes>

8. Add a relative routePath prop to each <SceneAppPage>. It needs to include a wildcard if there are any drill-down or tab pages under it.

-new SceneAppPage({
-  url: "/a/myorg-example-app/home",
-  ...
- });
+new SceneAppPage({
+  url: "/a/myorg-example-app/home",
+  routePath: "home/*",
+  ...
+})

9. Make the routePath prop defined on drill-downs relative and include a wildcard.