diff --git a/packages/app/src/App.tsx b/packages/app/src/App.tsx
index 8ddf53783d..759901c11e 100644
--- a/packages/app/src/App.tsx
+++ b/packages/app/src/App.tsx
@@ -28,6 +28,7 @@ import { hot } from 'react-hot-loader/root';
import { providers } from './identityProviders';
import { Router as CatalogRouter } from '@backstage/plugin-catalog';
import { Router as DocsRouter } from '@backstage/plugin-techdocs';
+import { Router as ExploreRouter } from '@backstage/plugin-explore';
import { Route, Routes, Navigate } from 'react-router';
import { EntityPage } from './components/catalog/EntityPage';
@@ -55,12 +56,13 @@ const deprecatedAppRoutes = app.getRoutes();
const AppRoutes = () => (
+
}
/>
} />
-
+ } />
{...deprecatedAppRoutes}
);
diff --git a/packages/create-app/templates/default-app/packages/app/src/App.tsx b/packages/create-app/templates/default-app/packages/app/src/App.tsx
index 3e6a0ef00e..cd03e20f06 100644
--- a/packages/create-app/templates/default-app/packages/app/src/App.tsx
+++ b/packages/create-app/templates/default-app/packages/app/src/App.tsx
@@ -11,6 +11,8 @@ import { AppSidebar } from './sidebar';
import { Route, Routes, Navigate } from 'react-router';
import { Router as CatalogRouter } from '@backstage/plugin-catalog';
import { Router as DocsRouter } from '@backstage/plugin-techdocs';
+import { Router as ExploreRouter } from '@backstage/plugin-explore';
+
import { EntityPage } from './components/catalog/EntityPage';
const app = createApp({
@@ -30,12 +32,13 @@ const App: FC<{}> = () => (
+
}
/>
} />
-
+ } />
{deprecatedAppRoutes}
diff --git a/plugins/explore/package.json b/plugins/explore/package.json
index 42176c45cf..1a4a44b9cd 100644
--- a/plugins/explore/package.json
+++ b/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",
diff --git a/plugins/explore/src/components/ExplorePluginPage.tsx b/plugins/explore/src/components/ExplorePluginPage.tsx
index 3e073ad322..4365157f62 100644
--- a/plugins/explore/src/components/ExplorePluginPage.tsx
+++ b/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 (
@@ -130,5 +130,3 @@ const ExplorePluginPage: FC<{}> = () => {
);
};
-
-export default ExplorePluginPage;
diff --git a/plugins/explore/src/components/Router.tsx b/plugins/explore/src/components/Router.tsx
new file mode 100644
index 0000000000..f2556b75ed
--- /dev/null
+++ b/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 = () => (
+
+ } />
+
+);
diff --git a/plugins/explore/src/index.ts b/plugins/explore/src/index.ts
index 3a0a0fe2d3..ff7857cacd 100644
--- a/plugins/explore/src/index.ts
+++ b/plugins/explore/src/index.ts
@@ -15,3 +15,4 @@
*/
export { plugin } from './plugin';
+export { Router } from './components/Router';
diff --git a/plugins/explore/src/plugin.ts b/plugins/explore/src/plugin.ts
index 66e48a9b15..75ea892242 100644
--- a/plugins/explore/src/plugin.ts
+++ b/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);
- },
});