Upgrade to React Router v6 (#2919)

src/home/RegisteredView.tsx

@@ -12,12 +12,12 @@ import {
   type FormEventHandler,
   type FC,
 } from "react";
-import { useHistory } from "react-router-dom";
 import { type MatrixClient } from "matrix-js-sdk/src/client";
 import { useTranslation } from "react-i18next";
 import { Heading, Text } from "@vector-im/compound-web";
 import { logger } from "matrix-js-sdk/src/logger";
 import { Button } from "@vector-im/compound-web";
+import { useNavigate } from "react-router-dom";
 
 import {
   createRoom,
@@ -46,7 +46,7 @@ export const RegisteredView: FC<Props> = ({ client }) => {
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<Error>();
   const [optInAnalytics] = useOptInAnalytics();
-  const history = useHistory();
+  const navigate = useNavigate();
   const { t } = useTranslation();
   const [joinExistingCallModalOpen, setJoinExistingCallModalOpen] =
     useState(false);
@@ -77,7 +77,7 @@ export const RegisteredView: FC<Props> = ({ client }) => {
         if (!createRoomResult.password)
           throw new Error("Failed to create room with shared secret");
 
-        history.push(
+        navigate(
           getRelativeRoomUrl(
             createRoomResult.roomId,
             { kind: E2eeType.SHARED_KEY, secret: createRoomResult.password },
@@ -99,15 +99,15 @@ export const RegisteredView: FC<Props> = ({ client }) => {
         }
       });
     },
-    [client, history, setJoinExistingCallModalOpen],
+    [client, navigate, setJoinExistingCallModalOpen],
   );
 
   const recentRooms = useGroupCallRooms(client);
 
   const [existingAlias, setExistingAlias] = useState<string>();
   const onJoinExistingRoom = useCallback(() => {
-    history.push(`/${existingAlias}`);
-  }, [history, existingAlias]);
+    navigate(`/${existingAlias}`);
+  }, [navigate, existingAlias]);
 
   return (
     <>

src/home/UnauthenticatedView.tsx

@@ -6,11 +6,11 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { type FC, useCallback, useState, type FormEventHandler } from "react";
-import { useHistory } from "react-router-dom";
 import { randomString } from "matrix-js-sdk/src/randomstring";
 import { Trans, useTranslation } from "react-i18next";
 import { Button, Heading, Text } from "@vector-im/compound-web";
 import { logger } from "matrix-js-sdk/src/logger";
+import { useNavigate } from "react-router-dom";
 
 import { useClient } from "../ClientContext";
 import { Header, HeaderLogo, LeftNav, RightNav } from "../Header";
@@ -50,7 +50,7 @@ export const UnauthenticatedView: FC = () => {
     [setJoinExistingCallModalOpen],
   );
   const [onFinished, setOnFinished] = useState<() => void>();
-  const history = useHistory();
+  const navigate = useNavigate();
   const { t } = useTranslation();
 
   const onSubmit: FormEventHandler<HTMLFormElement> = useCallback(
@@ -91,7 +91,7 @@ export const UnauthenticatedView: FC = () => {
             setOnFinished(() => {
               setClient({ client, session });
               const aliasLocalpart = roomAliasLocalpartFromRoomName(roomName);
-              history.push(`/${aliasLocalpart}`);
+              navigate(`/${aliasLocalpart}`);
             });
 
             setLoading(false);
@@ -110,7 +110,7 @@ export const UnauthenticatedView: FC = () => {
           throw new Error("Failed to create room with shared secret");
 
         setClient({ client, session });
-        history.push(
+        navigate(
           getRelativeRoomUrl(
             createRoomResult.roomId,
             { kind: E2eeType.SHARED_KEY, secret: createRoomResult.password },
@@ -130,7 +130,7 @@ export const UnauthenticatedView: FC = () => {
       register,
       reset,
       execute,
-      history,
+      navigate,
       setJoinExistingCallModalOpen,
       setClient,
     ],