temp: I am not sure about the change of InsightesRoute to Route

There is an error about InsightsRoute:
Uncaught Error: [Redirect] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>
at Routes (webpack-internal:///./node_modules/react-router-dom-v5-compat/node_modules/react-router/dist/index.js:1248:5)
    at InsightsRoutes (webpack-internal:///./src/InsightsRoutes.tsx:49:93)

This was the guide I was working with:
remix-run/react-router#8753

made it to just before this section: 6) Remove the compatibility package!
BUT the app did not work

(chore): Convert Switch to Routes of react-router

+ Convert CompatRoute to v6 Route
+ Convert Routes component name to InsightsRoutes

src/Routes.tsx → src/InsightsRoutes.tsx

@@ -1,8 +1,8 @@
 import { getBaseName, getInsights } from '@redhat-cloud-services/insights-common-typescript';
 import * as React from 'react';
 import { useEffect } from 'react';
-import { matchPath, Redirect, RouteProps, Switch } from 'react-router';
-import { CompatRoute, useNavigate, useLocation } from 'react-router-dom-v5-compat';
+import { matchPath, Redirect, RouteProps } from 'react-router';
+import { Routes, Route, useNavigate, useLocation } from 'react-router-dom-v5-compat';
 
 import { ErrorPage } from './pages/Error/Page';
 import ListPage from './pages/ListPage/ListPage';
@@ -31,10 +31,10 @@ const pathRoutes: Path[] = [
 
 type InsightsRouteProps = RouteProps;
 
-const InsightsRoute: React.FunctionComponent<InsightsRouteProps> = (props: InsightsRouteProps) => {
+const InsightsRoute: React.FunctionComponent<InsightsRouteProps> = (children) => {
     return (
         <ErrorPage>
-            <CompatRoute { ...props } />
+            {children}
         </ErrorPage>
     );
 };
@@ -48,7 +48,7 @@ const relativePath = (base: string, pathname: string) => {
     return relative;
 };
 
-export const Routes: React.FunctionComponent<unknown> = () => {
+export const InsightsRoutes: React.FunctionComponent<unknown> = () => {
     const insights = getInsights();
     const navigate = useNavigate();
     const location = useLocation();
@@ -78,15 +78,15 @@ export const Routes: React.FunctionComponent<unknown> = () => {
     }, [ insights.chrome.on, location, navigate ]);
 
     return (
-        <Switch>
+        <Routes>
             { pathRoutes.map(pathRoute => (
-                <InsightsRoute
+                <Route
                     key={ pathRoute.path }
-                    component={ pathRoute.component }
+                    component={ <InsightsRoute > {pathRoute.component} </InsightsRoute> }
                     path={ pathRoute.path }
                 />
             ))}
             <Redirect to={ linkTo.listPage() } />
-        </Switch>
+        </Routes>
     );
 };

src/__tests__/Routes.test.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { Route } from 'react-router';
 import { MemoryRouter } from 'react-router-dom';
 
-import { Routes } from '../Routes';
+import { InsightsRoutes } from '../InsightsRoutes';
 
 jest.mock('../pages/ListPage/ListPage', () => {
     const ListPageDummyComponent: React.FunctionComponent = () => {
@@ -42,7 +42,7 @@ describe('src/Routes', () => {
     it('Should render the ListPage on /', async () => {
         jest.useFakeTimers();
         const { Wrapper, data } = getWrapper('/');
-        render(<Routes />, {
+        render(<InsightsRoutes />, {
             wrapper: Wrapper
         });
 
@@ -53,7 +53,7 @@ describe('src/Routes', () => {
     it('Should render the ListPage on /list', async () => {
         jest.useFakeTimers();
         const { Wrapper, data } = getWrapper('/');
-        render(<Routes />, {
+        render(<InsightsRoutes />, {
             wrapper: Wrapper
         });
 
@@ -64,7 +64,7 @@ describe('src/Routes', () => {
     it('Should render the ListPage on /random-stuff', async () => {
         jest.useFakeTimers();
         const { Wrapper, data } = getWrapper('/random-stuff');
-        render(<Routes />, {
+        render(<InsightsRoutes />, {
             wrapper: Wrapper
         });
 

src/app/App.tsx

@@ -5,7 +5,7 @@ import { AppSkeleton } from '@redhat-cloud-services/insights-common-typescript';
 import * as React from 'react';
 
 import { NoPermissionsPage } from '../pages/NoPermissions/NoPermissionsPage';
-import { Routes } from '../Routes';
+import { InsightsRoutes } from '../InsightsRoutes';
 import { AppContext } from './AppContext';
 import { useApp } from './useApp';
 
@@ -27,7 +27,7 @@ const App: React.FunctionComponent = () => {
             { rbac.canReadPolicies ? (
                 <>
                     <NotificationsPortal />
-                    <Routes />
+                    <InsightsRoutes />
                 </>
             ) : (
                 <NoPermissionsPage />

src/components/Policy/Table/PolicyTable.tsx

@@ -22,7 +22,7 @@ import { Link } from 'react-router-dom-v5-compat';
 import { style } from 'typestyle';
 
 import { Messages } from '../../../properties/Messages';
-import { linkTo } from '../../../Routes';
+import { linkTo } from '../../../InsightsRoutes';
 import { Policy } from '../../../types/Policy';
 import { getOuiaProps } from '../../../utils/getOuiaProps';
 import { EmptyStateSection, EmptyStateSectionProps } from '../EmptyState/Section';

src/pages/CreatePolicyWizard/CreatePolicyWizard.tsx

@@ -6,7 +6,7 @@ import { Link } from 'react-router-dom-v5-compat';
 import { PolicyWizard } from '../../components/Policy/PolicyWizard';
 import { CreatePolicyResponse, VerifyPolicyResponse } from '../../components/Policy/PolicyWizardTypes';
 import { useFacts } from '../../hooks/useFacts';
-import { linkTo } from '../../Routes';
+import { linkTo } from '../../InsightsRoutes';
 import { useSavePolicyMutation } from '../../services/useSavePolicy';
 import { useValidatePolicyNameParametrizedQuery } from '../../services/useValidatePolicyName';
 import { useVerifyPolicyMutation } from '../../services/useVerifyPolicy';

src/pages/ListPage/__tests__/ListPage.test.tsx

@@ -8,7 +8,7 @@ import { useState } from 'react';
 import { appWrapperCleanup, appWrapperSetup, getConfiguredAppWrapper } from '../../../../test/AppWrapper';
 import { waitForAsyncEvents } from '../../../../test/TestUtils';
 import { Operations } from '../../../generated/Openapi';
-import { linkTo } from '../../../Routes';
+import { linkTo } from '../../../InsightsRoutes';
 import ListPage from '../ListPage';
 
 jest.mock('@redhat-cloud-services/insights-common-typescript', () => {

src/pages/PolicyDetail/EmptyState.tsx

@@ -5,7 +5,7 @@ import { format } from 'react-string-format';
 
 import { EmptyStateSection } from '../../components/Policy/EmptyState/Section';
 import { Messages } from '../../properties/Messages';
-import { linkTo } from '../../Routes';
+import { linkTo } from '../../InsightsRoutes';
 
 interface ListPageEmptyStateProps {
     policyId: string;

src/pages/PolicyDetail/PolicyDetail.tsx

@@ -19,7 +19,7 @@ import { AppContext } from '../../app/AppContext';
 import { ExpandedContent } from '../../components/Policy/Table/ExpandedContent';
 import { usePolicyToDelete } from '../../hooks/usePolicyToDelete';
 import { Messages } from '../../properties/Messages';
-import { linkTo } from '../../Routes';
+import { linkTo } from '../../InsightsRoutes';
 import { useGetPolicyParametrizedQuery } from '../../services/useGetPolicy';
 import { useMassChangePolicyEnabledMutation } from '../../services/useMassChangePolicyEnabled';
 import { Policy } from '../../types/Policy';

src/pages/PolicyDetail/Skeleton.tsx

@@ -13,7 +13,7 @@ import { BreadcrumbLinkItem, Section } from '@redhat-cloud-services/insights-com
 import * as React from 'react';
 import { style } from 'typestyle';
 
-import { linkTo } from '../../Routes';
+import { linkTo } from '../../InsightsRoutes';
 
 const skeletonClassName = style({
     width: 200

src/pages/PolicyDetail/__tests__/PolicyDetail.test.tsx

@@ -8,7 +8,7 @@ import * as React from 'react';
 import { appWrapperCleanup, appWrapperSetup, getConfiguredAppWrapper } from '../../../../test/AppWrapper';
 import { waitForAsyncEvents } from '../../../../test/TestUtils';
 import { Operations, Schemas } from '../../../generated/Openapi';
-import { linkTo } from '../../../Routes';
+import { linkTo } from '../../../InsightsRoutes';
 import { ServerPolicyRequest, Uuid } from '../../../types/Policy/Policy';
 import { PolicyDetail } from '../PolicyDetail';
 import Policy = Schemas.Policy;

src/pages/PolicyDetail/hooks/usePolicy.ts

@@ -6,7 +6,7 @@ import { unstable_batchedUpdates } from 'react-dom';
 import { useNavigate, useParams } from 'react-router-dom-v5-compat';
 import { usePrevious } from 'react-use';
 
-import { linkTo } from '../../../Routes';
+import { linkTo } from '../../../InsightsRoutes';
 import { Policy } from '../../../types/Policy';
 import { Uuid } from '../../../types/Policy/Policy';
 

test/AppWrapper.tsx

@@ -12,7 +12,7 @@ import * as React from 'react';
 import { ClientContextProvider, createClient } from 'react-fetching-library';
 import { Provider } from 'react-redux';
 import { RouteProps } from 'react-router';
-import { CompatRoute, useLocation } from 'react-router-dom-v5-compat';
+import { Route, useLocation } from 'react-router-dom-v5-compat';
 import { MemoryRouterProps } from 'react-router';
 import { MemoryRouter as Router } from 'react-router-dom';
 
@@ -114,9 +114,9 @@ export const AppWrapper: React.FunctionComponent<Config> = (props) => {
                     <AppContext.Provider value={ props.appContext || defaultAppContextSettings }>
                         <InternalWrapper { ...props }>
                             <NotificationsPortal />
-                            <CompatRoute { ...props.route } >
+                            <Route { ...props.route } >
                                 { props.children }
-                            </CompatRoute>
+                            </Route>
                         </InternalWrapper>
                     </AppContext.Provider>
                 </ClientContextProvider>