diff --git a/packages/app/src/App.tsx b/packages/app/src/App.tsx
index 627b5d19aa..a58bf45f9c 100644
--- a/packages/app/src/App.tsx
+++ b/packages/app/src/App.tsx
@@ -29,7 +29,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 GraphiQLRouter } from '@backstage/plugin-graphiql';
+import { GraphiQLPage } from '@backstage/plugin-graphiql';
 import { Router as TechRadarRouter } from '@backstage/plugin-tech-radar';
 import { Router as LighthouseRouter } from '@backstage/plugin-lighthouse';
 import { Router as RegisterComponentRouter } from '@backstage/plugin-register-component';
@@ -81,7 +81,7 @@ const AppRoutes = () => (
       path="/tech-radar"
       element={<TechRadarRouter width={1500} height={800} />}
     />
-    <Route path="/graphiql" element={<GraphiQLRouter />} />
+    <Route path="/graphiql" element={<GraphiQLPage />} />
     <Route path="/lighthouse/*" element={<LighthouseRouter />} />
     <Route
       path="/register-component"
diff --git a/packages/core-api/src/public.ts b/packages/core-api/src/public.ts
index 0a30936c52..f91d97c31d 100644
--- a/packages/core-api/src/public.ts
+++ b/packages/core-api/src/public.ts
@@ -16,6 +16,7 @@
 
 export * from './apis';
 export * from './app';
+export * from './extensions';
 export * from './icons';
 export * from './plugin';
 export * from './routing';
diff --git a/packages/core-api/src/routing/index.ts b/packages/core-api/src/routing/index.ts
index d682aa9348..3591f299f1 100644
--- a/packages/core-api/src/routing/index.ts
+++ b/packages/core-api/src/routing/index.ts
@@ -22,3 +22,4 @@ export type {
   MutableRouteRef,
 } from './types';
 export { createRouteRef } from './RouteRef';
+export { useRouteRef } from './hooks';
diff --git a/plugins/graphiql/src/index.ts b/plugins/graphiql/src/index.ts
index 50698cdb4c..4b1da14079 100644
--- a/plugins/graphiql/src/index.ts
+++ b/plugins/graphiql/src/index.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-export { plugin } from './plugin';
+export { plugin, GraphiQLPage } from './plugin';
 export { GraphiQLPage as Router } from './components';
 export * from './lib/api';
 export * from './route-refs';
diff --git a/plugins/graphiql/src/plugin.ts b/plugins/graphiql/src/plugin.ts
index 28d27802d0..fb4c33760d 100644
--- a/plugins/graphiql/src/plugin.ts
+++ b/plugins/graphiql/src/plugin.ts
@@ -14,8 +14,14 @@
  * limitations under the License.
  */
 
-import { createPlugin, createApiFactory } from '@backstage/core';
+import {
+  createPlugin,
+  createApiFactory,
+  createRoutableExtension,
+} from '@backstage/core';
+import { GraphiQLPage as Component } from './components';
 import { graphQlBrowseApiRef, GraphQLEndpoints } from './lib/api';
+import { graphiQLRouteRef } from './route-refs';
 
 export const plugin = createPlugin({
   id: 'graphiql',
@@ -33,3 +39,10 @@ export const plugin = createPlugin({
     ),
   ],
 });
+
+export const GraphiQLPage = plugin.provide(
+  createRoutableExtension({
+    component: Component,
+    mountPoint: graphiQLRouteRef,
+  }),
+);