Upgrade to React Router v6 (#2919)

src/auth/LoginPage.tsx

@@ -6,7 +6,7 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { type FC, type FormEvent, useCallback, useRef, useState } from "react";
-import { useHistory, useLocation } from "react-router-dom";
+import { useNavigate, useLocation } from "react-router-dom";
 import { Trans, useTranslation } from "react-i18next";
 import { Button } from "@vector-im/compound-web";
 
@@ -29,7 +29,7 @@ export const LoginPage: FC = () => {
   const homeserver = Config.defaultHomeserverUrl(); // TODO: Make this configurable
   const usernameRef = useRef<HTMLInputElement>(null);
   const passwordRef = useRef<HTMLInputElement>(null);
-  const history = useHistory();
+  const navigate = useNavigate();
   const location = useLocation();
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<Error>();
@@ -61,9 +61,9 @@ export const LoginPage: FC = () => {
           if (locationState && locationState.from) {
             // eslint-disable-next-line @typescript-eslint/ban-ts-comment
             // @ts-ignore
-            history.push(locationState.from);
+            navigate(locationState.from);
           } else {
-            history.push("/");
+            navigate("/");
           }
           PosthogAnalytics.instance.eventLogin.track();
         })
@@ -72,7 +72,7 @@ export const LoginPage: FC = () => {
           setLoading(false);
         });
     },
-    [login, location, history, homeserver, setClient],
+    [login, location, navigate, homeserver, setClient],
   );
   // we need to limit the length of the homserver name to not cover the whole loginview input with the string.
   let shortendHomeserverName = Config.defaultServerName()?.slice(0, 25);

src/auth/RegisterPage.tsx

@@ -14,7 +14,7 @@ import {
   useRef,
   useState,
 } from "react";
-import { useHistory, useLocation } from "react-router-dom";
+import { useNavigate, useLocation } from "react-router-dom";
 import { captureException } from "@sentry/react";
 import { sleep } from "matrix-js-sdk/src/utils";
 import { Trans, useTranslation } from "react-i18next";
@@ -41,7 +41,7 @@ export const RegisterPage: FC = () => {
     useClientLegacy();
 
   const confirmPasswordRef = useRef<HTMLInputElement>(null);
-  const history = useHistory();
+  const navigate = useNavigate();
   const location = useLocation();
   const [registering, setRegistering] = useState(false);
   const [error, setError] = useState<Error>();
@@ -106,9 +106,9 @@ export const RegisterPage: FC = () => {
           if (location.state?.from) {
             // eslint-disable-next-line @typescript-eslint/ban-ts-comment
             // @ts-ignore
-            history.push(location.state?.from);
+            navigate(location.state?.from);
           } else {
-            history.push("/");
+            navigate("/");
           }
         })
         .catch((error) => {
@@ -120,7 +120,7 @@ export const RegisterPage: FC = () => {
     [
       register,
       location,
-      history,
+      navigate,
       passwordlessUser,
       reset,
       execute,
@@ -141,9 +141,9 @@ export const RegisterPage: FC = () => {
 
   useEffect(() => {
     if (!loading && authenticated && !passwordlessUser && !registering) {
-      history.push("/");
+      navigate("/");
     }
-  }, [loading, history, authenticated, passwordlessUser, registering]);
+  }, [loading, navigate, authenticated, passwordlessUser, registering]);
 
   if (loading) {
     return <LoadingView />;