sw-625 review react router

config/build.plugins.js

@@ -33,7 +33,10 @@ const setCommonPlugins = () => {
     }),
     fedModulePlugin({
       root: RELATIVE_DIRNAME,
-      shared: [{ 'react-redux': { requiredVersion: dependencies['react-redux'] } }]
+      shared: [
+        { 'react-router-dom': { singleton: true, requiredVersion: '*' } },
+        { 'react-redux': { requiredVersion: dependencies['react-redux'] } }
+      ]
     })
   ];
 

config/cspell.config.json

@@ -23,6 +23,7 @@
     "hoverable",
     "ibmpower",
     "ibmz",
+    "iife",
     "ipsum",
     "keycloak",
     "kubernetes",

config/jest.setupTests.js

@@ -53,6 +53,14 @@ jest.mock('react-redux', () => ({
   useSelector: jest.fn()
 }));
 
+/**
+ * Emulate react router dom useLocation
+ */
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useLocation: () => ({ hash: '', search: '' })
+}));
+
 /**
  * Add the displayName property to function based components. Makes sure that snapshot tests have named components
  * instead of displaying a generic "<Component.../>".
@@ -258,20 +266,21 @@ global.mockWindowLocation = async (
   { url = 'https://ci.foo.redhat.com/subscriptions/rhel', location: locationProps = {} } = {}
 ) => {
   const updatedUrl = new URL(url);
-  const { location } = window;
-  delete window.location;
-  // mock
-  window.location = {
+  const updatedLocation = {
     href: updatedUrl.href,
     search: updatedUrl.search,
     hash: updatedUrl.hash,
     pathname: updatedUrl.pathname,
     replace: Function.prototype,
     ...locationProps
   };
-  await callback(window.location);
-  // restore
-  window.location = location;
+
+  const { mockClear } = mockObjectProperty(window, 'location', updatedLocation);
+  await callback(updatedLocation);
+
+  return {
+    mockClear
+  };
 };
 
 // FixMe: revisit squashing log and group messaging, redux leaks log messaging

package.json

@@ -97,8 +97,8 @@
     "react-dom": "^17.0.2",
     "react-i18next": "^12.0.0",
     "react-redux": "^8.0.5",
-    "react-router": "5.3.3",
-    "react-router-dom": "5.3.0",
+    "react-router": "6.8.1",
+    "react-router-dom": "6.8.1",
     "react-use": "^17.4.0",
     "redux": "^4.2.0",
     "redux-logger": "^3.0.6",

src/AppEntry.js

@@ -1,18 +1,17 @@
 import React from 'react';
 import { Provider } from 'react-redux';
-import { BrowserRouter } from 'react-router-dom';
-import { routerHelpers } from './components/router';
 import { store } from './redux';
 import App from './app';
 import './styles/index.scss';
 import '@patternfly/react-styles/css/components/Select/select.css';
 
-const AppEntry = () => (
-  <Provider store={store}>
-    <BrowserRouter basename={routerHelpers.dynamicBaseName()}>
+const AppEntry = () => {
+  console.log('>>> APP ENTRY LOAD >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>');
+  return (
+    <Provider store={store}>
       <App />
-    </BrowserRouter>
-  </Provider>
-);
+    </Provider>
+  );
+};
 
 export { AppEntry as default, AppEntry };

src/app.js

@@ -25,20 +25,23 @@ const App = ({ getLocale, useDispatch: useAliasDispatch, useSelector: useAliasSe
   const dispatch = useAliasDispatch();
   const { value: locale } = useAliasSelector(({ user }) => user?.locale?.data, {});
   let platformNotifications = null;
-
+  console.log('>>> APP load', locale);
   useMount(() => {
-    dispatch(getLocale());
+    console.log('>>> APP mount comp', locale);
+    if (!locale) {
+      dispatch(getLocale());
+    }
   });
 
   if (!helpers.UI_DISABLED_NOTIFICATIONS) {
     platformNotifications = <NotificationsPortal />;
   }
 
   return (
-    <I18n locale={locale || null}>
+    <I18n locale={locale}>
       {platformNotifications}
-      <Authentication>
-        <Router />
+      <Authentication key={`auth-${locale}`}>
+        <Router key={`route-${locale}`} />
       </Authentication>
     </I18n>
   );