chore(react-router-v6): Tidying up some more components and moving across to the new API

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

@@ -65,7 +65,7 @@ const AuditList: FC<{}> = () => {
     return 0;
   }, [value?.total, value?.limit]);
 
-  const history = useNavigate();
+  const navigate = useNavigate();
 
   let content: ReactNode = null;
   if (value) {
@@ -77,7 +77,7 @@ const AuditList: FC<{}> = () => {
             page={page}
             count={pageCount}
             onChange={(_event: Event, newPage: number) => {
-              history.replace(`/lighthouse?page=${newPage}`);
+              navigate(`/lighthouse?page=${newPage}`);
             }}
           />
         )}

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

@@ -58,7 +58,7 @@ const CreateAudit: FC<{}> = () => {
   const lighthouseApi = useApi(lighthouseApiRef);
   const classes = useStyles();
   const query = useQuery();
-  const history = useNavigate();
+  const navigate = useNavigate();
   const [submitting, setSubmitting] = useState(false);
   const [url, setUrl] = useState<string>(query.get('url') || '');
   const [emulatedFormFactor, setEmulatedFormFactor] = useState('mobile');
@@ -78,7 +78,7 @@ const CreateAudit: FC<{}> = () => {
           },
         },
       });
-      history.push('/lighthouse');
+      navigate('/lighthouse');
     } catch (err) {
       errorApi.post(err);
     } finally {
@@ -90,7 +90,7 @@ const CreateAudit: FC<{}> = () => {
     lighthouseApi,
     setSubmitting,
     errorApi,
-    history,
+    navigate,
   ]);
 
   return (