Update dependency react-router-dom to v7 (#1624)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Hugh Nimmo-Smith <hughns@element.io>

src/ClientContext.tsx

@@ -228,7 +228,7 @@ export const ClientProvider: FC<Props> = ({ children }) => {
     await client.clearStores();
     clearSession();
     setInitClientState(null);
-    navigate("/");
+    await navigate("/");
     PosthogAnalytics.instance.setRegistrationType(RegistrationType.Guest);
   }, [navigate, initClientState?.client]);
 

src/UserMenuContainer.tsx

@@ -7,6 +7,7 @@ Please see LICENSE in the repository root for full details.
 
 import { type FC, useCallback, useState } from "react";
 import { useNavigate, useLocation } from "react-router-dom";
+import { logger } from "matrix-js-sdk/src/logger";
 
 import { useClientLegacy } from "./ClientContext";
 import { useProfile } from "./profile/useProfile";
@@ -45,7 +46,9 @@ export const UserMenuContainer: FC<Props> = ({ preventNavigation = false }) => {
           logout?.();
           break;
         case "login":
-          navigate("/login", { state: { from: location } });
+          navigate("/login", { state: { from: location } })?.catch((error) =>
+            logger.error("Failed to navigate to login", error),
+          );
           break;
       }
     },

src/auth/LoginPage.tsx

@@ -48,7 +48,7 @@ export const LoginPage: FC = () => {
       }
 
       login(homeserver, usernameRef.current.value, passwordRef.current.value)
-        .then(([client, session]) => {
+        .then(async ([client, session]) => {
           if (!setClient) {
             return;
           }
@@ -61,9 +61,9 @@ export const LoginPage: FC = () => {
           if (locationState && locationState.from) {
             // eslint-disable-next-line @typescript-eslint/ban-ts-comment
             // @ts-ignore
-            navigate(locationState.from);
+            await navigate(locationState.from);
           } else {
-            navigate("/");
+            await navigate("/");
           }
           PosthogAnalytics.instance.eventLogin.track();
         })

src/auth/RegisterPage.tsx

@@ -100,15 +100,15 @@ export const RegisterPage: FC = () => {
       };
 
       submit()
-        .then(() => {
+        .then(async () => {
           // eslint-disable-next-line @typescript-eslint/ban-ts-comment
           // @ts-ignore
           if (location.state?.from) {
             // eslint-disable-next-line @typescript-eslint/ban-ts-comment
             // @ts-ignore
-            navigate(location.state?.from);
+            await navigate(location.state?.from);
           } else {
-            navigate("/");
+            await navigate("/");
           }
         })
         .catch((error) => {
@@ -141,7 +141,9 @@ export const RegisterPage: FC = () => {
 
   useEffect(() => {
     if (!loading && authenticated && !passwordlessUser && !registering) {
-      navigate("/");
+      navigate("/")?.catch((error) => {
+        logger.error("Failed to navigate to /", error);
+      });
     }
   }, [loading, navigate, authenticated, passwordlessUser, registering]);
 

src/home/RegisteredView.tsx

@@ -77,7 +77,7 @@ export const RegisteredView: FC<Props> = ({ client }) => {
         if (!createRoomResult.password)
           throw new Error("Failed to create room with shared secret");
 
-        navigate(
+        await navigate(
           getRelativeRoomUrl(
             createRoomResult.roomId,
             { kind: E2eeType.SHARED_KEY, secret: createRoomResult.password },
@@ -106,7 +106,9 @@ export const RegisteredView: FC<Props> = ({ client }) => {
 
   const [existingAlias, setExistingAlias] = useState<string>();
   const onJoinExistingRoom = useCallback(() => {
-    navigate(`/${existingAlias}`);
+    navigate(`/${existingAlias}`)?.catch((error) => {
+      logger.error("Failed to navigate to existing alias", error);
+    });
   }, [navigate, existingAlias]);
 
   return (

src/home/UnauthenticatedView.tsx

@@ -91,7 +91,9 @@ export const UnauthenticatedView: FC = () => {
             setOnFinished(() => {
               setClient({ client, session });
               const aliasLocalpart = roomAliasLocalpartFromRoomName(roomName);
-              navigate(`/${aliasLocalpart}`);
+              navigate(`/${aliasLocalpart}`)?.catch((error) => {
+                logger.error("Failed to navigate to alias localpart", error);
+              });
             });
 
             setLoading(false);
@@ -110,7 +112,7 @@ export const UnauthenticatedView: FC = () => {
           throw new Error("Failed to create room with shared secret");
 
         setClient({ client, session });
-        navigate(
+        await navigate(
           getRelativeRoomUrl(
             createRoomResult.roomId,
             { kind: E2eeType.SHARED_KEY, secret: createRoomResult.password },

src/room/CallEndedView.tsx

@@ -16,6 +16,7 @@ import { type MatrixClient } from "matrix-js-sdk/src/client";
 import { Trans, useTranslation } from "react-i18next";
 import { Button, Heading, Text } from "@vector-im/compound-web";
 import { useNavigate } from "react-router-dom";
+import { logger } from "matrix-js-sdk/src/logger";
 
 import styles from "./CallEndedView.module.css";
 import feedbackStyle from "../input/FeedbackInput.module.css";
@@ -76,7 +77,9 @@ export const CallEndedView: FC<Props> = ({
             setSurveySubmitted(true);
           } else if (!confineToRoom) {
             // if the user already has an account immediately go back to the home screen
-            navigate("/");
+            navigate("/")?.catch((error) => {
+              logger.error("Failed to navigate to /", error);
+            });
           }
         }, 1000);
       }, 1000);

src/room/GroupCallView.tsx

@@ -259,13 +259,13 @@ export const GroupCallView: FC<Props> = ({
         sendInstantly && audioPromise ? audioPromise : undefined,
       )
         // Only sends matrix leave event. The Livekit session will disconnect once the ActiveCall-view unmounts.
-        .then(() => {
+        .then(async () => {
           if (
             !isPasswordlessUser &&
             !confineToRoom &&
             !PosthogAnalytics.instance.isEnabled()
           ) {
-            navigate("/");
+            await navigate("/");
           }
         })
         .catch((e) => {

src/room/LobbyView.tsx

@@ -89,7 +89,11 @@ export const LobbyView: FC<Props> = ({
   );
 
   const navigate = useNavigate();
-  const onLeaveClick = useCallback(() => navigate("/"), [navigate]);
+  const onLeaveClick = useCallback(() => {
+    navigate("/")?.catch((error) => {
+      logger.error("Failed to navigate to /", error);
+    });
+  }, [navigate]);
 
   const recentsButtonInFooter = useMediaQuery("(max-height: 500px)");
   const recentsButton = !confineToRoom && (