Use routeRefs

plugins/catalog/src/components/CatalogPage/CatalogPage.tsx

@@ -34,6 +34,8 @@ import {
 } from '../CatalogFilter/CatalogFilter';
 import { Button, makeStyles, Typography, Link } from '@material-ui/core';
 import { filterGroups, defaultFilter } from '../../data/filters';
+import { Link as RouterLink } from 'react-router-dom';
+import { rootRoute as scaffolderRootRoute } from '@backstage/plugin-scaffolder';
 
 const useStyles = makeStyles(theme => ({
   contentWrapper: {
@@ -72,18 +74,23 @@ const CatalogPage: FC<{}> = () => {
             <Typography>
               <span role="img" aria-label="wave" style={{ fontSize: '125%' }}>
                 👋🏼
-              </span>{' '}
+              </span>
               Welcome to Backstage, we are happy to have you. Start by checking
-              out our{' '}
+              out our
               <Link href="/welcome" color="textSecondary">
                 getting started
-              </Link>{' '}
+              </Link>
               page.
             </Typography>
           }
         />
         <ContentHeader title="Services">
-          <Button variant="contained" color="primary" href="/create">
+          <Button
+            component={RouterLink}
+            variant="contained"
+            color="primary"
+            to={scaffolderRootRoute.path}
+          >
             Create Service
           </Button>
           <SupportButton>All your components</SupportButton>

plugins/catalog/src/components/CatalogTable/CatalogTable.tsx

@@ -17,6 +17,8 @@ import React, { FC } from 'react';
 import { Component } from '../../data/component';
 import { InfoCard, Progress, Table, TableColumn } from '@backstage/core';
 import { Typography, Link } from '@material-ui/core';
+import { Link as RouterLink, generatePath } from 'react-router-dom';
+import { entityRoute } from '../../routes';
 
 const columns: TableColumn[] = [
   {
@@ -24,7 +26,12 @@ const columns: TableColumn[] = [
     field: 'name',
     highlight: true,
     render: (componentData: any) => (
-      <Link href={`/catalog/${componentData.name}`}>{componentData.name}</Link>
+      <Link
+        component={RouterLink}
+        to={generatePath(entityRoute.path, { name: componentData.name })}
+      >
+        {componentData.name}
+      </Link>
     ),
   },
   {

plugins/catalog/src/index.ts

@@ -18,3 +18,4 @@ export { plugin } from './plugin';
 export * from './api/CatalogClient';
 export * from './api/types';
 export * from './types';
+export * from './routes';

plugins/catalog/src/plugin.ts

@@ -17,11 +17,12 @@
 import { createPlugin } from '@backstage/core';
 import CatalogPage from './components/CatalogPage';
 import ComponentPage from './components/ComponentPage/ComponentPage';
+import { rootRoute, entityRoute } from './routes';
 
 export const plugin = createPlugin({
   id: 'catalog',
   register({ router }) {
-    router.registerRoute('/', CatalogPage);
-    router.registerRoute('/catalog/:name/', ComponentPage);
+    router.addRoute(rootRoute, CatalogPage);
+    router.addRoute(entityRoute, ComponentPage);
   },
 });

plugins/catalog/src/routes.ts

@@ -0,0 +1,14 @@
+import { createRouteRef } from '@backstage/core';
+
+const NoIcon = () => null;
+
+export const rootRoute = createRouteRef({
+  icon: NoIcon,
+  path: '/',
+  title: 'Catalog',
+});
+export const entityRoute = createRouteRef({
+  icon: NoIcon,
+  path: '/catalog/:name/',
+  title: 'Entity',
+});

plugins/register-component/src/components/RegisterComponentPage/RegisterComponentPage.tsx

@@ -41,9 +41,15 @@ import {
   useApi,
   errorApiRef,
   StructuredMetadataTable,
+  Header,
 } from '@backstage/core';
 import RegisterComponentForm from '../RegisterComponentForm';
 import { catalogApiRef } from '@backstage/plugin-catalog';
+import {
+  entityRoute,
+  rootRoute as catalogRootRoute,
+} from '@backstage/plugin-catalog';
+import { generatePath } from 'react-router';
 
 const useStyles = makeStyles(theme => ({
   dialogPaper: {
@@ -100,10 +106,8 @@ const RegisterComponentPage: FC<{}> = () => {
 
   return (
     <Page theme={pageTheme.tool}>
+      <Header title="Register existing component" />
       <Content>
-        <ContentHeader title="Register existing component">
-          <SupportButton>Documentation</SupportButton>
-        </ContentHeader>
         <Grid container spacing={3} direction="column">
           <Grid item>
             <InfoCard title="Start tracking your component in Backstage">
@@ -139,9 +143,13 @@ const RegisterComponentPage: FC<{}> = () => {
                             link: (
                               <Link
                                 component={RouterLink}
-                                to={`/catalog/${entity.metadata.name}`}
+                                to={generatePath(entityRoute.path, {
+                                  name: entity.metadata.name,
+                                })}
                               >
-                                /catalog/{entity.metadata.name}
+                                {generatePath(entityRoute.path, {
+                                  name: entity.metadata.name,
+                                })}
                               </Link>
                             ),
                           }}
@@ -156,7 +164,11 @@ const RegisterComponentPage: FC<{}> = () => {
               </DialogContentText>
             </DialogContent>
             <DialogActions>
-              <Button component={RouterLink} to="/" color="default">
+              <Button
+                component={RouterLink}
+                to={catalogRootRoute.path}
+                color="default"
+              >
                 To Catalog
               </Button>
             </DialogActions>

plugins/register-component/src/index.ts

@@ -14,4 +14,4 @@
  * limitations under the License.
  */
 
-export { plugin } from './plugin';
+export { plugin, rootRoute } from './plugin';

plugins/register-component/src/plugin.ts

@@ -14,12 +14,18 @@
  * limitations under the License.
  */
 
-import { createPlugin } from '@backstage/core';
+import { createPlugin, createRouteRef } from '@backstage/core';
 import RegisterComponentPage from './components/RegisterComponentPage';
 
+export const rootRoute = createRouteRef({
+  icon: () => null,
+  path: '/register-component',
+  title: 'Register component',
+});
+
 export const plugin = createPlugin({
   id: 'register-component',
   register({ router }) {
-    router.registerRoute('/register-component', RegisterComponentPage);
+    router.addRoute(rootRoute, RegisterComponentPage);
   },
 });

plugins/scaffolder/src/components/ScaffolderPage/index.tsx

@@ -57,7 +57,7 @@ const ScaffolderPage: React.FC<{}> = () => {
             component={RouterLink}
             to="/register-component"
           >
-            Register existing entity
+            Register existing component
           </Button>
         </ContentHeader>
         <Typography variant="body2" paragraph style={{ fontStyle: 'italic' }}>

plugins/scaffolder/src/index.ts

@@ -14,4 +14,4 @@
  * limitations under the License.
  */
 
-export { plugin } from './plugin';
+export { plugin, rootRoute } from './plugin';

plugins/scaffolder/src/plugin.ts

@@ -14,12 +14,18 @@
  * limitations under the License.
  */
 
-import { createPlugin } from '@backstage/core';
+import { createPlugin, createRouteRef } from '@backstage/core';
 import ScaffolderPage from './components/ScaffolderPage';
 
+export const rootRoute = createRouteRef({
+  icon: () => null,
+  path: '/create',
+  title: 'Create entity',
+});
+
 export const plugin = createPlugin({
   id: 'scaffolder',
   register({ router }) {
-    router.registerRoute('/create', ScaffolderPage);
+    router.addRoute(rootRoute, ScaffolderPage);
   },
 });