diff --git a/plugins/scaffolder/src/components/TemplateCard/TemplateCard.tsx b/plugins/scaffolder/src/components/TemplateCard/TemplateCard.tsx
index 86ef5fb8b3..3ca93cba3d 100644
--- a/plugins/scaffolder/src/components/TemplateCard/TemplateCard.tsx
+++ b/plugins/scaffolder/src/components/TemplateCard/TemplateCard.tsx
@@ -21,7 +21,18 @@ import {
   RELATION_OWNED_BY,
   stringifyEntityRef,
 } from '@backstage/catalog-model';
-import { TemplateEntityV1beta3 } from '@backstage/plugin-scaffolder-common';
+import {
+  Button,
+  ItemCardHeader,
+  MarkdownContent,
+} from '@backstage/core-components';
+import {
+  createExternalRouteRef,
+  IconComponent,
+  useApi,
+  useApp,
+  useRouteRef,
+} from '@backstage/core-plugin-api';
 import {
   ScmIntegrationIcon,
   scmIntegrationsApiRef,
@@ -32,6 +43,7 @@ import {
   getEntityRelations,
   getEntitySourceLocation,
 } from '@backstage/plugin-catalog-react';
+import { TemplateEntityV1beta3 } from '@backstage/plugin-scaffolder-common';
 import { BackstageTheme } from '@backstage/theme';
 import {
   Box,
@@ -47,24 +59,11 @@ import {
   Typography,
   useTheme,
 } from '@material-ui/core';
-import WarningIcon from '@material-ui/icons/Warning';
 import LanguageIcon from '@material-ui/icons/Language';
+import WarningIcon from '@material-ui/icons/Warning';
 import React from 'react';
 import { selectedTemplateRouteRef } from '../../routes';
 
-import {
-  Button,
-  ItemCardHeader,
-  MarkdownContent,
-} from '@backstage/core-components';
-import {
-  IconComponent,
-  useApi,
-  useApp,
-  useRouteRef,
-} from '@backstage/core-plugin-api';
-import { viewTechDocRouteRef } from '@backstage/plugin-catalog/src/routes';
-
 const useStyles = makeStyles(theme => ({
   cardHeader: {
     position: 'relative',
@@ -192,7 +191,13 @@ export const TemplateCard = ({ template, deprecated }: TemplateCardProps) => {
   const href = templateRoute({ templateName: name, namespace });
 
   // TechDocs Links
-  const viewTechDocsRoute = useRouteRef(viewTechDocRouteRef);
+  const viewTechDocsRoute = useRouteRef(
+    createExternalRouteRef({
+      id: 'view-techdoc',
+      optional: true,
+      params: ['namespace', 'kind', 'name'],
+    }),
+  );
   const viewTechDocsAnnotation =
     template.metadata.annotations?.['backstage.io/techdocs-ref'];
   const viewTechDocsLink =