diff --git a/plugins/catalog/src/components/Router.tsx b/plugins/catalog/src/components/Router.tsx
index 9116c0b551..2a0eacf074 100644
--- a/plugins/catalog/src/components/Router.tsx
+++ b/plugins/catalog/src/components/Router.tsx
@@ -16,8 +16,6 @@
 import { ENTITY_DEFAULT_NAMESPACE } from '@backstage/catalog-model';
 import {
   AsyncEntityProvider,
-  entityRoute,
-  rootRoute,
   useEntity,
   useEntityFromUrl,
 } from '@backstage/plugin-catalog-react';
@@ -87,9 +85,9 @@ export const Router = ({
   EntityPage?: ComponentType;
 }) => (
   <Routes>
-    <Route path={`${rootRoute.path}`} element={<CatalogPage />} />
+    <Route path="/" element={<CatalogPage />} />
     <Route
-      path={`${entityRoute.path}`}
+      path="/:namespace/:kind/:name"
       element={
         <EntityLoader>
           <EntityPageSwitch EntityPage={EntityPage} />
diff --git a/plugins/circleci/src/components/BuildsPage/lib/CITable/CITable.tsx b/plugins/circleci/src/components/BuildsPage/lib/CITable/CITable.tsx
index b33e1b40cc..510fd20dac 100644
--- a/plugins/circleci/src/components/BuildsPage/lib/CITable/CITable.tsx
+++ b/plugins/circleci/src/components/BuildsPage/lib/CITable/CITable.tsx
@@ -26,7 +26,7 @@ import {
 import RetryIcon from '@material-ui/icons/Replay';
 import GitHubIcon from '@material-ui/icons/GitHub';
 import LaunchIcon from '@material-ui/icons/Launch';
-import { Link as RouterLink, generatePath } from 'react-router-dom';
+import { Link as RouterLink } from 'react-router-dom';
 import { durationHumanized, relativeTimeTo } from '../../../../util';
 import { circleCIBuildRouteRef } from '../../../../route-refs';
 import {
@@ -38,6 +38,7 @@ import {
   Table,
   TableColumn,
 } from '@backstage/core-components';
+import { useRouteRef } from '@backstage/core-plugin-api';
 
 export type CITableBuildInfo = {
   id: string;
@@ -144,16 +145,21 @@ const generatedColumns: TableColumn[] = [
     field: 'buildName',
     highlight: true,
     width: '20%',
-    render: (row: Partial<CITableBuildInfo>) => (
-      <Link
-        component={RouterLink}
-        to={`${generatePath(circleCIBuildRouteRef.path, {
-          buildId: row.id!,
-        })}`}
-      >
-        {row.buildName ? row.buildName : row?.workflow?.name}
-      </Link>
-    ),
+    render: (row: Partial<CITableBuildInfo>) => {
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      const routeLink = useRouteRef(circleCIBuildRouteRef);
+
+      return (
+        <Link
+          component={RouterLink}
+          to={`${routeLink({
+            buildId: row.id!,
+          })}`}
+        >
+          {row.buildName ? row.buildName : row?.workflow?.name}
+        </Link>
+      );
+    },
   },
   {
     title: 'Job',
diff --git a/plugins/circleci/src/components/Router.tsx b/plugins/circleci/src/components/Router.tsx
index 1bc13d6327..5aa8dd9df9 100644
--- a/plugins/circleci/src/components/Router.tsx
+++ b/plugins/circleci/src/components/Router.tsx
@@ -16,7 +16,7 @@
 
 import React from 'react';
 import { Routes, Route } from 'react-router';
-import { circleCIRouteRef, circleCIBuildRouteRef } from '../route-refs';
+import { circleCIBuildRouteRef } from '../route-refs';
 import { BuildWithStepsPage } from './BuildWithStepsPage/';
 import { BuildsPage } from './BuildsPage';
 import { CIRCLECI_ANNOTATION } from '../constants';
@@ -41,9 +41,9 @@ export const Router = (_props: Props) => {
 
   return (
     <Routes>
-      <Route path={`/${circleCIRouteRef.path}`} element={<BuildsPage />} />
+      <Route path="/" element={<BuildsPage />} />
       <Route
-        path={`/${circleCIBuildRouteRef.path}`}
+        path={`${circleCIBuildRouteRef.path}`}
         element={<BuildWithStepsPage />}
       />
     </Routes>
diff --git a/plugins/circleci/src/route-refs.tsx b/plugins/circleci/src/route-refs.tsx
index 14e43e5c8d..e8579b9f0d 100644
--- a/plugins/circleci/src/route-refs.tsx
+++ b/plugins/circleci/src/route-refs.tsx
@@ -14,12 +14,14 @@
  * limitations under the License.
  */
 
-import { createRouteRef } from '@backstage/core-plugin-api';
+import { createRouteRef, createSubRouteRef } from '@backstage/core-plugin-api';
 
 export const circleCIRouteRef = createRouteRef({
   id: 'circle-ci',
 });
 
-export const circleCIBuildRouteRef = createRouteRef({
+export const circleCIBuildRouteRef = createSubRouteRef({
   id: 'circle-ci/build',
+  parent: circleCIRouteRef,
+  path: '/:buildId',
 });
diff --git a/plugins/cloudbuild/src/components/Router.tsx b/plugins/cloudbuild/src/components/Router.tsx
index f9b9a8974f..bdeae7e8fd 100644
--- a/plugins/cloudbuild/src/components/Router.tsx
+++ b/plugins/cloudbuild/src/components/Router.tsx
@@ -17,7 +17,7 @@ import React from 'react';
 import { Entity } from '@backstage/catalog-model';
 import { useEntity } from '@backstage/plugin-catalog-react';
 import { Routes, Route } from 'react-router';
-import { rootRouteRef, buildRouteRef } from '../routes';
+import { buildRouteRef } from '../routes';
 import { WorkflowRunDetails } from './WorkflowRunDetails';
 import { WorkflowRunsTable } from './WorkflowRunsTable';
 import { CLOUDBUILD_ANNOTATION } from './useProjectName';
@@ -40,15 +40,11 @@ export const Router = (_props: Props) => {
   }
   return (
     <Routes>
+      <Route path="/" element={<WorkflowRunsTable entity={entity} />} />
       <Route
-        path={`/${rootRouteRef.path}`}
-        element={<WorkflowRunsTable entity={entity} />}
-      />
-      <Route
-        path={`/${buildRouteRef.path}`}
+        path={`${buildRouteRef.path}`}
         element={<WorkflowRunDetails entity={entity} />}
       />
-      )
     </Routes>
   );
 };
diff --git a/plugins/cloudbuild/src/components/WorkflowRunsTable/WorkflowRunsTable.tsx b/plugins/cloudbuild/src/components/WorkflowRunsTable/WorkflowRunsTable.tsx
index 0d00347183..aefa140349 100644
--- a/plugins/cloudbuild/src/components/WorkflowRunsTable/WorkflowRunsTable.tsx
+++ b/plugins/cloudbuild/src/components/WorkflowRunsTable/WorkflowRunsTable.tsx
@@ -17,7 +17,7 @@ import React from 'react';
 import { Link, Typography, Box, IconButton, Tooltip } from '@material-ui/core';
 import RetryIcon from '@material-ui/icons/Replay';
 import GoogleIcon from '@material-ui/icons/CloudCircle';
-import { Link as RouterLink, generatePath } from 'react-router-dom';
+import { Link as RouterLink } from 'react-router-dom';
 import { useWorkflowRuns, WorkflowRun } from '../useWorkflowRuns';
 import { WorkflowRunStatus } from '../WorkflowRunStatus';
 import SyncIcon from '@material-ui/icons/Sync';
@@ -26,6 +26,7 @@ import { Entity } from '@backstage/catalog-model';
 import { buildRouteRef } from '../../routes';
 import { DateTime } from 'luxon';
 import { Table, TableColumn } from '@backstage/core-components';
+import { useRouteRef } from '@backstage/core-plugin-api';
 
 const generatedColumns: TableColumn[] = [
   {
@@ -54,15 +55,19 @@ const generatedColumns: TableColumn[] = [
     field: 'source',
     highlight: true,
     width: '200px',
-    render: (row: Partial<WorkflowRun>) => (
-      <Link
-        component={RouterLink}
-        data-testid="cell-source"
-        to={generatePath(buildRouteRef.path, { id: row.id! })}
-      >
-        {row.message}
-      </Link>
-    ),
+    render: (row: Partial<WorkflowRun>) => {
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      const routeLink = useRouteRef(buildRouteRef);
+      return (
+        <Link
+          component={RouterLink}
+          data-testid="cell-source"
+          to={routeLink({ id: row.id! })}
+        >
+          {row.message}
+        </Link>
+      );
+    },
   },
   {
     title: 'Ref',
diff --git a/plugins/cloudbuild/src/routes.ts b/plugins/cloudbuild/src/routes.ts
index 78050fd88e..3737e6948f 100644
--- a/plugins/cloudbuild/src/routes.ts
+++ b/plugins/cloudbuild/src/routes.ts
@@ -13,12 +13,14 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { createRouteRef } from '@backstage/core-plugin-api';
+import { createRouteRef, createSubRouteRef } from '@backstage/core-plugin-api';
 
 export const rootRouteRef = createRouteRef({
   id: 'cloudbuild',
 });
 
-export const buildRouteRef = createRouteRef({
+export const buildRouteRef = createSubRouteRef({
   id: 'cloudbuild/run',
+  path: '/:id',
+  parent: rootRouteRef,
 });
diff --git a/plugins/github-actions/src/components/Router.tsx b/plugins/github-actions/src/components/Router.tsx
index cbf29d1d9d..ea07213c45 100644
--- a/plugins/github-actions/src/components/Router.tsx
+++ b/plugins/github-actions/src/components/Router.tsx
@@ -17,7 +17,7 @@ import React from 'react';
 import { Entity } from '@backstage/catalog-model';
 import { useEntity } from '@backstage/plugin-catalog-react';
 import { Routes, Route } from 'react-router';
-import { rootRouteRef, buildRouteRef } from '../routes';
+import { buildRouteRef } from '../routes';
 import { WorkflowRunDetails } from './WorkflowRunDetails';
 import { WorkflowRunsTable } from './WorkflowRunsTable';
 import { GITHUB_ACTIONS_ANNOTATION } from './useProjectName';
@@ -41,12 +41,9 @@ export const Router = (_props: Props) => {
   }
   return (
     <Routes>
+      <Route path="/" element={<WorkflowRunsTable entity={entity} />} />
       <Route
-        path={`/${rootRouteRef.path}`}
-        element={<WorkflowRunsTable entity={entity} />}
-      />
-      <Route
-        path={`/${buildRouteRef.path}`}
+        path={`${buildRouteRef.path}`}
         element={<WorkflowRunDetails entity={entity} />}
       />
       )
diff --git a/plugins/github-actions/src/components/WorkflowRunsTable/WorkflowRunsTable.tsx b/plugins/github-actions/src/components/WorkflowRunsTable/WorkflowRunsTable.tsx
index 51f26bf5d7..d80ecc5d52 100644
--- a/plugins/github-actions/src/components/WorkflowRunsTable/WorkflowRunsTable.tsx
+++ b/plugins/github-actions/src/components/WorkflowRunsTable/WorkflowRunsTable.tsx
@@ -24,7 +24,7 @@ import {
 } from '@material-ui/core';
 import RetryIcon from '@material-ui/icons/Replay';
 import GitHubIcon from '@material-ui/icons/GitHub';
-import { Link as RouterLink, generatePath } from 'react-router-dom';
+import { Link as RouterLink } from 'react-router-dom';
 import { useWorkflowRuns, WorkflowRun } from '../useWorkflowRuns';
 import { WorkflowRunStatus } from '../WorkflowRunStatus';
 import SyncIcon from '@material-ui/icons/Sync';
@@ -34,7 +34,7 @@ import { Entity } from '@backstage/catalog-model';
 import { readGitHubIntegrationConfigs } from '@backstage/integration';
 
 import { EmptyState, Table, TableColumn } from '@backstage/core-components';
-import { configApiRef, useApi } from '@backstage/core-plugin-api';
+import { configApiRef, useApi, useRouteRef } from '@backstage/core-plugin-api';
 
 const generatedColumns: TableColumn[] = [
   {
@@ -47,14 +47,15 @@ const generatedColumns: TableColumn[] = [
     title: 'Message',
     field: 'message',
     highlight: true,
-    render: (row: Partial<WorkflowRun>) => (
-      <Link
-        component={RouterLink}
-        to={generatePath(buildRouteRef.path, { id: row.id! })}
-      >
-        {row.message}
-      </Link>
-    ),
+    render: (row: Partial<WorkflowRun>) => {
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      const routeLink = useRouteRef(buildRouteRef);
+      return (
+        <Link component={RouterLink} to={routeLink({ id: row.id! })}>
+          {row.message}
+        </Link>
+      );
+    },
   },
   {
     title: 'Source',
diff --git a/plugins/github-actions/src/routes.ts b/plugins/github-actions/src/routes.ts
index 4da027ba4c..8e854fad45 100644
--- a/plugins/github-actions/src/routes.ts
+++ b/plugins/github-actions/src/routes.ts
@@ -14,13 +14,14 @@
  * limitations under the License.
  */
 
-import { createRouteRef } from '@backstage/core-plugin-api';
+import { createRouteRef, createSubRouteRef } from '@backstage/core-plugin-api';
 
 export const rootRouteRef = createRouteRef({
   id: 'github-actions',
 });
 
-export const buildRouteRef = createRouteRef({
+export const buildRouteRef = createSubRouteRef({
   id: 'github-actions/build',
-  params: ['id'],
+  path: '/:id',
+  parent: rootRouteRef,
 });