chore(deps): upgrade to react-router v6 (#984)

* chore(deps): upgrade to react-router v6 * chore: remove leftover comment * chore(deps): bump to 6.14.2
appium · Jul 20, 2023 · 2bb1a06 · 2bb1a06
1 parent 388b943
commit 2bb1a06
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 163 deletions.
diff --git a/app/renderer/components/Inspector/Inspector.js b/app/renderer/components/Inspector/Inspector.js
@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import { debounce } from 'lodash';
 import { SCREENSHOT_INTERACTION_MODE, INTERACTION_MODE } from './shared';
 import { Card, Button, Spin, Tooltip, Modal, Tabs, Space, Switch } from 'antd';
@@ -56,7 +56,7 @@ const Inspector = (props) => {
 
   const [scaleRatio, setScaleRatio] = useState(1);
 
-  const history = useHistory();
+  const navigate = useNavigate();
 
   const showScreenshot = ((screenshot && !screenshotError) ||
                           (mjpegScreenshotUrl && (!isSourceRefreshOn || !isAwaitingMjpegStream)));
@@ -127,7 +127,7 @@ const Inspector = (props) => {
 
   const quitCurrentSession = async (reason, killedByUser = true) => {
     await quitSession(reason, killedByUser);
-    history.push('/session');
+    navigate('/session', { replace: true });
   };
 
   useEffect(() => {

diff --git a/app/renderer/components/Session/Session.js b/app/renderer/components/Session/Session.js
@@ -1,6 +1,6 @@
 import { shell, ipcRenderer } from '../../polyfills';
 import React, { useEffect } from 'react';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import _ from 'lodash';
 import CapabilityEditor from './CapabilityEditor';
 import SavedSessions from './SavedSessions';
@@ -22,7 +22,7 @@ const Session = (props) => {
           caps, capsUUID, capsName, isCapsDirty, isEditingDesiredCaps, requestSaveAsModal,
           saveSession, newSession, savedSessions, newSessionLoading, attachSessId, t } = props;
 
-  const history = useHistory();
+  const navigate = useNavigate();
 
   const isAttaching = tabKey === 'attach';
 
@@ -37,7 +37,7 @@ const Session = (props) => {
 
   const loadNewSession = async (caps, attachSessId = null) => {
     await newSession(caps, attachSessId);
-    history.push('/inspector');
+    navigate('/inspector', { replace: true });
   };
 
   useEffect(() => {

diff --git a/app/renderer/routes.js b/app/renderer/routes.js
@@ -1,5 +1,5 @@
 import React, { Suspense } from 'react';
-import { Switch, Route } from 'react-router-dom';
+import { Routes, Route } from 'react-router-dom';
 import SessionPage from './containers/SessionPage';
 import InspectorPage from './containers/InspectorPage';
 import Spinner from './components/Spinner/Spinner';
@@ -14,16 +14,10 @@ ipcRenderer.on('appium-language-changed', (event, message) => {
 
 export default () => (
   <Suspense fallback={<Spinner />}>
-    <Switch>
-      <Route exact path="/">
-        <SessionPage />
-      </Route>
-      <Route path="/session">
-        <SessionPage />
-      </Route>
-      <Route path="/inspector">
-        <InspectorPage />
-      </Route>
-    </Switch>
+    <Routes>
+      <Route path="/" element={<SessionPage />} />
+      <Route path="/session" element={<SessionPage />} />
+      <Route path="/inspector" element={<InspectorPage />} />
+    </Routes>
   </Suspense>
 );