Merge pull request #1840 from jetstreamapp/chore/upgrade-react-router-8

Upgrade to React Router 8 and clean up navigation

Author: paustint

apps/jetstream-canvas/src/app/AppRoutes.tsx

@@ -4,7 +4,7 @@ import { APP_ROUTES } from '@jetstream/shared/ui-router';
 import { PlatformEventMessage } from '@jetstream/types';
 import { AppHome, OrgSelectionRequired as OrgSelectionRequiredExternal } from '@jetstream/ui-core';
 import { useEffect } from 'react';
-import { Navigate, Route, Routes, useLocation } from 'react-router-dom';
+import { Navigate, Route, Routes, useLocation } from 'react-router';
 import lazy from './core/LazyLoad';
 
 const LoadRecords = lazy(() => import('@jetstream/feature/load-records').then((module) => ({ default: module.LoadRecords })));

apps/jetstream-canvas/src/app/core/config.ts

@@ -1,4 +1,4 @@
-import { BrowserRouter } from 'react-router-dom';
+import { BrowserRouter } from 'react-router';
 
 export const CONFIG = {
   Router: BrowserRouter,

apps/jetstream-desktop-client/src/app/AppRoutes.tsx

@@ -1,7 +1,7 @@
 import { APP_ROUTES } from '@jetstream/shared/ui-router';
 import { AppHome, Feedback, OrgSelectionRequired as OrgSelectionRequiredExternal } from '@jetstream/ui-core';
 import { useEffect } from 'react';
-import { Navigate, Route, Routes, useLocation, useNavigate } from 'react-router-dom';
+import { Navigate, Route, Routes, useLocation, useNavigate } from 'react-router';
 import { environment } from '../environments/environment';
 import lazy from './components/core/LazyLoad';
 import { addDesktopOrg } from './utils/utils';

apps/jetstream-desktop-client/src/app/components/core/LogInitializer.tsx

@@ -1,6 +1,6 @@
 import { enableLogger, logger } from '@jetstream/shared/client-logger';
 import { FunctionComponent, useEffect } from 'react';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 
 const URL_PARAM = 'logger';
 

apps/jetstream-desktop-client/src/app/components/core/config.ts

@@ -1,5 +1,5 @@
 import { AxiosAdapterConfig } from '@jetstream/shared/data';
-import { HashRouter } from 'react-router-dom';
+import { HashRouter } from 'react-router';
 import { desktopExtensionAxiosAdapter } from '../../utils/desktop-axios-adapter';
 
 AxiosAdapterConfig.adapter = desktopExtensionAxiosAdapter;

apps/jetstream-desktop-client/src/app/components/settings/Settings.tsx

@@ -11,7 +11,7 @@ import { fromAppState } from '@jetstream/ui/app-state';
 import { dexieDataSync, recentHistoryItemsDb } from '@jetstream/ui/db';
 import { useAtom, useAtomValue, useSetAtom } from 'jotai';
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router';
 import { desktopUserPreferences } from '../core/AppDesktopState';
 import LoggerConfig from './LoggerConfig';
 

apps/jetstream-web-extension/src/core/AppInitializer.tsx

@@ -13,7 +13,7 @@ import { useObservable } from 'dexie-react-hooks';
 import { useAtomValue, useSetAtom } from 'jotai';
 import localforage from 'localforage';
 import React, { FunctionComponent, useEffect, useState } from 'react';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 import { Observable } from 'rxjs';
 import browser from 'webextension-polyfill';
 import { environment } from '../environments/environment';

apps/jetstream-web-extension/src/core/AppWrapper.tsx

@@ -7,7 +7,7 @@ import '@salesforce-ux/design-system-2/dist/css/bundled/slds2.cosmos.css';
 import { Provider, useAtomValue } from 'jotai';
 import { ReactNode, Suspense } from 'react';
 import ModalContainer from 'react-modal-promise';
-import { MemoryRouter } from 'react-router-dom';
+import { MemoryRouter } from 'react-router';
 import { environment } from '../environments/environment';
 import { browserExtensionAxiosAdapter } from '../utils/extension-axios-adapter';
 import { chromeStorageLoading, extensionStateStore } from '../utils/extension.store';

apps/jetstream-web-extension/src/pages/app/App.tsx

@@ -20,7 +20,7 @@ import { UserFeedbackWidget } from '@jetstream/ui';
 import { AppHome, AppLoading, ErrorBoundaryEmptyFallback, ErrorBoundaryFallback, Feedback, HeaderNavbar } from '@jetstream/ui-core';
 import { Suspense, useEffect } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
-import { Navigate, Route, Routes, useNavigate } from 'react-router-dom';
+import { Navigate, Route, Routes, useNavigate } from 'react-router';
 import { AppWrapper } from '../../core/AppWrapper';
 import { applyExtensionThemeBeforeMount } from '../../core/ExtensionThemeApplier';
 import { initAndRenderReact } from '../../utils/web-extension.utils';

apps/jetstream/src/app/AppRoutes.tsx

@@ -3,7 +3,7 @@ import { AppHome, AppHomeBillingUser, Feedback, OrgSelectionRequired } from '@je
 import { abilityState, isReadOnlyUserState } from '@jetstream/ui/app-state';
 import { useAtomValue } from 'jotai';
 import { useEffect } from 'react';
-import { Navigate, Route, Routes, useLocation } from 'react-router-dom';
+import { Navigate, Route, Routes, useLocation } from 'react-router';
 import { environment } from '../environments/environment';
 import lazy from './components/core/LazyLoad';
 import Profile from './components/profile/Profile';