diff --git a/.changeset/brown-kings-greet.md b/.changeset/brown-kings-greet.md
new file mode 100644
index 0000000000..00e82675ee
--- /dev/null
+++ b/.changeset/brown-kings-greet.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-github-actions': patch
+---
+
+Modify RecentWorkflowRunsCard use constructed routeRef instead of hardcoded route.
diff --git a/plugins/github-actions/src/components/Cards/RecentWorkflowRunsCard.tsx b/plugins/github-actions/src/components/Cards/RecentWorkflowRunsCard.tsx
index fcd0f194a3..931b5b676e 100644
--- a/plugins/github-actions/src/components/Cards/RecentWorkflowRunsCard.tsx
+++ b/plugins/github-actions/src/components/Cards/RecentWorkflowRunsCard.tsx
@@ -16,19 +16,25 @@
 import { readGitHubIntegrationConfigs } from '@backstage/integration';
 import { useEntity } from '@backstage/plugin-catalog-react';
 import React, { useEffect } from 'react';
-import { generatePath, Link as RouterLink } from 'react-router-dom';
+import { Link as RouterLink } from 'react-router-dom';
 import { GITHUB_ACTIONS_ANNOTATION } from '../getProjectNameFromEntity';
 import { useWorkflowRuns, WorkflowRun } from '../useWorkflowRuns';
 import { WorkflowRunStatus } from '../WorkflowRunStatus';
 import { Typography } from '@material-ui/core';
 
-import { configApiRef, errorApiRef, useApi } from '@backstage/core-plugin-api';
+import {
+  configApiRef,
+  errorApiRef,
+  useApi,
+  useRouteRef,
+} from '@backstage/core-plugin-api';
 import {
   InfoCard,
   InfoCardVariants,
   Link,
   Table,
 } from '@backstage/core-components';
+import { buildRouteRef } from '../../routes';
 
 const firstLine = (message: string): string => message.split('\n')[0];
 
@@ -69,7 +75,7 @@ export const RecentWorkflowRunsCard = (props: {
   }, [error, errorApi]);
 
   const githubHost = hostname || 'github.com';
-
+  const routeLink = useRouteRef(buildRouteRef);
   return (
     <InfoCard
       title="Recent Workflow Runs"
@@ -103,10 +109,7 @@ export const RecentWorkflowRunsCard = (props: {
               title: 'Commit Message',
               field: 'message',
               render: data => (
-                <Link
-                  component={RouterLink}
-                  to={generatePath('./ci-cd/:id', { id: data.id! })}
-                >
+                <Link component={RouterLink} to={routeLink({ id: data.id! })}>
                   {firstLine(data.message ?? '')}
                 </Link>
               ),