diff --git a/plugins/techdocs/src/reader/components/TechDocsPageHeader.test.tsx b/plugins/techdocs/src/reader/components/TechDocsPageHeader.test.tsx
index a2369dcfc1..8128366392 100644
--- a/plugins/techdocs/src/reader/components/TechDocsPageHeader.test.tsx
+++ b/plugins/techdocs/src/reader/components/TechDocsPageHeader.test.tsx
@@ -15,44 +15,49 @@
  */
 import React from 'react';
 import { TechDocsPageHeader } from './TechDocsPageHeader';
-import { render, act } from '@testing-library/react';
-import { wrapInTestApp } from '@backstage/test-utils';
+import { act } from '@testing-library/react';
+import { renderInTestApp } from '@backstage/test-utils';
+import { entityRouteRef } from '@backstage/plugin-catalog-react';
 
 describe('<TechDocsPageHeader />', () => {
   it('should render a techdocs page header', async () => {
     await act(async () => {
-      const rendered = render(
-        wrapInTestApp(
-          <TechDocsPageHeader
-            entityId={{
-              kind: 'test',
-              name: 'test-name',
-              namespace: 'test-namespace',
-            }}
-            metadataRequest={{
-              entity: {
-                loading: false,
-                value: {
-                  locationMetadata: {
-                    type: 'github',
-                    target: 'https://example.com/',
-                  },
-                  spec: {
-                    owner: 'test',
-                  },
+      const rendered = await renderInTestApp(
+        <TechDocsPageHeader
+          entityId={{
+            kind: 'test',
+            name: 'test-name',
+            namespace: 'test-namespace',
+          }}
+          metadataRequest={{
+            entity: {
+              loading: false,
+              value: {
+                locationMetadata: {
+                  type: 'github',
+                  target: 'https://example.com/',
+                },
+                spec: {
+                  owner: 'test',
                 },
               },
-              techdocs: {
-                loading: false,
-                value: {
-                  site_name: 'test-site-name',
-                  site_description: 'test-site-desc',
-                },
+            },
+            techdocs: {
+              loading: false,
+              value: {
+                site_name: 'test-site-name',
+                site_description: 'test-site-desc',
               },
-            }}
-          />,
-        ),
+            },
+          }}
+        />,
+        {
+          mountedRoutes: {
+            '/catalog/:namespace/:kind/:name/*': entityRouteRef,
+          },
+        },
       );
+
       expect(rendered.container.innerHTML).toContain('header');
       expect(rendered.getAllByText('test-site-name')).toHaveLength(2);
       expect(rendered.getByText('test-site-desc')).toBeDefined();
@@ -61,27 +66,65 @@ describe('<TechDocsPageHeader />', () => {
 
   it('should render a techdocs page header even if metadata is missing', async () => {
     await act(async () => {
-      const rendered = render(
-        wrapInTestApp(
-          <TechDocsPageHeader
-            entityId={{
-              kind: 'test',
-              name: 'test-name',
-              namespace: 'test-namespace',
-            }}
-            metadataRequest={{
-              entity: {
-                loading: false,
-              },
-              techdocs: {
-                loading: false,
-              },
-            }}
-          />,
-        ),
+      const rendered = await renderInTestApp(
+        <TechDocsPageHeader
+          entityId={{
+            kind: 'test',
+            name: 'test-name',
+            namespace: 'test-namespace',
+          }}
+          metadataRequest={{
+            entity: {
+              loading: false,
+            },
+            techdocs: {
+              loading: false,
+            },
+          }}
+        />,
+        {
+          mountedRoutes: {
+            '/catalog/:namespace/:kind/:name/*': entityRouteRef,
+          },
+        },
       );
 
       expect(rendered.container.innerHTML).toContain('header');
     });
   });
+
+  it('should render a link back to the component page', async () => {
+    await act(async () => {
+      const rendered = await renderInTestApp(
+        <TechDocsPageHeader
+          entityId={{
+            kind: 'test',
+            name: 'test-name',
+            namespace: 'test-namespace',
+          }}
+          metadataRequest={{
+            entity: {
+              loading: false,
+            },
+            techdocs: {
+              loading: false,
+              value: {
+                site_name: 'test-site-name',
+                site_description: 'test-site-desc',
+              },
+            },
+          }}
+        />,
+        {
+          mountedRoutes: {
+            '/catalog/:namespace/:kind/:name/*': entityRouteRef,
+          },
+        },
+      );
+
+      expect(rendered.container.innerHTML).toContain(
+        '/catalog/test-namespace/test/test-name',
+      );
+    });
+  });
 });
diff --git a/plugins/techdocs/src/reader/components/TechDocsPageHeader.tsx b/plugins/techdocs/src/reader/components/TechDocsPageHeader.tsx
index c994b52422..7b0c2e64cc 100644
--- a/plugins/techdocs/src/reader/components/TechDocsPageHeader.tsx
+++ b/plugins/techdocs/src/reader/components/TechDocsPageHeader.tsx
@@ -18,8 +18,9 @@ import React from 'react';
 import { AsyncState } from 'react-use/lib/useAsync';
 import CodeIcon from '@material-ui/icons/Code';
 import { EntityName } from '@backstage/catalog-model';
-import { Header, HeaderLabel, Link } from '@backstage/core';
+import { Header, HeaderLabel, Link, useRouteRef } from '@backstage/core';
 import { TechDocsMetadata } from '../../types';
+import { entityRouteRef } from '@backstage/plugin-catalog-react';
 
 type TechDocsPageHeaderProps = {
   entityId: EntityName;
@@ -41,7 +42,7 @@ export const TechDocsPageHeader = ({
   const { value: techdocsMetadataValues } = techdocsMetadata;
   const { value: entityMetadataValues } = entityMetadata;
 
-  const { kind, name } = entityId;
+  const { name } = entityId;
 
   const { site_name: siteName, site_description: siteDescription } =
     techdocsMetadataValues || {};
@@ -51,14 +52,14 @@ export const TechDocsPageHeader = ({
     spec: { owner, lifecycle },
   } = entityMetadataValues || { spec: {} };
 
-  const componentLink = `/catalog/${kind}/${name}`;
+  const componentLink = useRouteRef(entityRouteRef);
 
   const labels = (
     <>
       <HeaderLabel
         label="Component"
         value={
-          <Link style={{ color: '#fff' }} to={componentLink}>
+          <Link style={{ color: '#fff' }} to={componentLink(entityId)}>
             {name}
           </Link>
         }
@@ -92,7 +93,7 @@ export const TechDocsPageHeader = ({
         siteDescription && siteDescription !== 'None' ? siteDescription : ''
       }
       type={name}
-      typeLink={componentLink}
+      typeLink={componentLink(entityId)}
     >
       {labels}
     </Header>