feat(plugin-explore): migrate to new routing api

plugins/explore/package.json

@@ -29,7 +29,8 @@
     "classnames": "^2.2.6",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "react-use": "^15.3.3"
+    "react-use": "^15.3.3",
+    "react-router": "6.0.0-beta.0"
   },
   "devDependencies": {
     "@backstage/cli": "^0.1.1-alpha.21",

plugins/explore/src/components/ExplorePluginPage.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React, { FC } from 'react';
+import React from 'react';
 import { makeStyles, Typography } from '@material-ui/core';
 import {
   Content,
@@ -107,7 +107,7 @@ const toolsCards = [
   },
 ];
 
-const ExplorePluginPage: FC<{}> = () => {
+export const ExplorePluginPage = () => {
   const classes = useStyles();
   return (
     <Page theme={pageTheme.home}>
@@ -130,5 +130,3 @@ const ExplorePluginPage: FC<{}> = () => {
     </Page>
   );
 };
-
-export default ExplorePluginPage;

plugins/explore/src/components/Router.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Route, Routes } from 'react-router';
+import { ExplorePluginPage } from './ExplorePluginPage';
+import { rootRouteRef } from '../plugin';
+
+export const Router = () => (
+  <Routes>
+    <Route path={`/${rootRouteRef.path}`} element={<ExplorePluginPage />} />
+  </Routes>
+);

plugins/explore/src/index.ts

@@ -15,3 +15,4 @@
  */
 
 export { plugin } from './plugin';
+export { Router } from './components/Router';

plugins/explore/src/plugin.ts

@@ -14,12 +14,9 @@
  * limitations under the License.
  */
 
-import { createPlugin } from '@backstage/core';
-import ExplorePluginPage from './components/ExplorePluginPage';
+import { createPlugin, createRouteRef } from '@backstage/core';
 
+export const rootRouteRef = createRouteRef({ path: '', title: 'Explore' });
 export const plugin = createPlugin({
   id: 'explore',
-  register({ router }) {
-    router.registerRoute('/explore', ExplorePluginPage);
-  },
 });