More use of routeRefs

plugins/lighthouse/src/components/AuditList/AuditListTable.tsx

@@ -23,8 +23,9 @@ import {
   CATEGORY_LABELS,
   buildSparklinesDataForItem,
 } from '../../utils';
-import { Link } from 'react-router-dom';
+import { Link, generatePath } from 'react-router-dom';
 import AuditStatusIcon from '../AuditStatusIcon';
+import { viewAuditRouteRef } from '../../plugin';
 
 const columns: TableColumn[] = [
   {
@@ -98,7 +99,13 @@ export const AuditListTable: FC<{ items: Website[] }> = ({ items }) => {
 
     return {
       websiteUrl: (
-        <Link to={`audit/${website.lastAudit.id}`}>{website.url}</Link>
+        <Link
+          to={generatePath(viewAuditRouteRef.path, {
+            id: website.lastAudit.id,
+          })}
+        >
+          {website.url}
+        </Link>
       ),
       ...trendlines,
       lastReport: (

plugins/lighthouse/src/components/AuditView/index.tsx

@@ -14,7 +14,13 @@
  * limitations under the License.
  */
 import React, { useState, useEffect, ReactNode, FC } from 'react';
-import { Link, useParams, useNavigate } from 'react-router-dom';
+import {
+  Link,
+  useParams,
+  useNavigate,
+  generatePath,
+  resolvePath,
+} from 'react-router-dom';
 import { useAsync } from 'react-use';
 import {
   makeStyles,
@@ -42,6 +48,7 @@ import { lighthouseApiRef, Website, Audit } from '../../api';
 import AuditStatusIcon from '../AuditStatusIcon';
 import LighthouseSupportButton from '../SupportButton';
 import { formatTime } from '../../utils';
+import { viewAuditRouteRef, createAuditRouteRef } from '../../plugin';
 
 const useStyles = makeStyles({
   contentGrid: {
@@ -75,7 +82,12 @@ const AuditLinkList: FC<AuditLinkListProps> = ({
         button
         component={Link}
         replace
-        to={`audit/${audit.id}`}
+        to={resolvePath(
+          generatePath(viewAuditRouteRef.path, {
+            id: audit.id,
+          }),
+          '../../',
+        )}
       >
         <ListItemIcon>
           <AuditStatusIcon audit={audit} />
@@ -155,7 +167,7 @@ const ConnectedAuditView: FC<{}> = () => {
     );
   }
 
-  let createAuditButtonUrl = 'create-audit';
+  let createAuditButtonUrl = createAuditRouteRef.path;
   if (value?.url) {
     createAuditButtonUrl += `?url=${encodeURIComponent(value.url)}`;
   }