Use the react-router-dom-v5-compat library

openshift-assisted · Aug 1, 2024 · 36314a4 · 36314a4
1 parent 44b3067
commit 36314a4
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 3 deletions.
diff --git a/package.json b/package.json
@@ -30,7 +30,8 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-i18next": "^11.11.4",
-    "react-router-dom": "^5.3.3"
+    "react-router-dom": "^5.3.3",
+    "react-router-dom-v5-compat": "^6.21.2"
   },
   "devDependencies": {
     "@redhat-cloud-services/eslint-config-redhat-cloud-services": "^2.0.3",

diff --git a/src/components/RootApp.tsx b/src/components/RootApp.tsx
@@ -1,7 +1,8 @@
 import React, { useEffect, useState } from 'react';
-import { Api, Config, Routes } from '@openshift-assisted/ui-lib/ocm';
+import { Api, Config, UILibRoutes } from '@openshift-assisted/ui-lib/ocm';
 import type { FeatureListType } from '@openshift-assisted/ui-lib/common';
 import { BrowserRouter } from 'react-router-dom';
+import { CompatRouter } from 'react-router-dom-v5-compat';
 import { AxiosInstance, AxiosRequestConfig } from 'axios';
 import '../i18n';
 import useChrome from '@redhat-cloud-services/frontend-components/useChrome';
@@ -53,7 +54,9 @@ function RootApp({
   return (
     <React.StrictMode>
       <BrowserRouter basename={'/openshift'}>
-        <Routes allEnabledFeatures={allEnabledFeatures} />
+        <CompatRouter>
+          <UILibRoutes allEnabledFeatures={allEnabledFeatures} />
+        </CompatRouter>
       </BrowserRouter>
     </React.StrictMode>
   );