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

packages/core-api/src/app/App.tsx

@@ -15,7 +15,7 @@
  */
 
 import React, { ComponentType, FC } from 'react';
-import { Route, Redirect, Routes, Navigate } from 'react-router-dom';
+import { Route, Routes, Navigate } from 'react-router-dom';
 import { AppContextProvider } from './AppContext';
 import { BackstageApp, AppComponents, AppConfigLoader } from './types';
 import { BackstagePlugin } from '../plugin';

packages/core/src/layout/ErrorPage/ErrorPage.tsx

@@ -40,7 +40,7 @@ const useStyles = makeStyles<BackstageTheme>(theme => ({
 
 export const ErrorPage = ({ status, statusMessage }: IErrorPageProps) => {
   const classes = useStyles();
-  const history = useNavigate();
+  const navigate = useNavigate();
 
   return (
     <Grid container className={classes.container}>
@@ -53,7 +53,7 @@ export const ErrorPage = ({ status, statusMessage }: IErrorPageProps) => {
           Looks like someone dropped the mic!
         </Typography>
         <Typography variant="h6">
-          <Link data-testid="go-back-link" onClick={history.goBack}>
+          <Link data-testid="go-back-link" onClick={() => navigate(-1)}>
             Go back
           </Link>
           ... or if you think this is a bug, please file an{' '}

packages/core/src/layout/Sidebar/Items.tsx

@@ -139,8 +139,7 @@ export const SidebarItem: FC<SidebarItemProps> = ({
       <NavLink
         className={clsx(classes.root, classes.closed)}
         activeClassName={classes.selected}
-        isActive={match => Boolean(match && !disableSelected)}
-        exact
+        end
         to={to}
         onClick={onClick}
       >
@@ -153,8 +152,7 @@ export const SidebarItem: FC<SidebarItemProps> = ({
     <NavLink
       className={clsx(classes.root, classes.open)}
       activeClassName={classes.selected}
-      isActive={match => Boolean(match && !disableSelected)}
-      exact
+      end
       to={to}
       onClick={onClick}
     >

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 (