Bumps react-router-dom to v6

waspc/data/Generator/templates/react-app/src/auth/pages/OAuthCallback.tsx

@@ -1,7 +1,7 @@
 {{={= =}=}}
 import { useEffect, useRef, useState } from "react";
 import { type AxiosResponse } from "axios";
-import { Redirect, useLocation } from 'react-router-dom'
+import { Navigate, useLocation } from 'react-router-dom'
 import { useAuth } from 'wasp/client/auth'
 import { api } from 'wasp/client/api'
 import { initSession } from 'wasp/auth/helpers/user'
@@ -14,7 +14,7 @@ export function OAuthCallbackPage() {
   const { error, user } = useOAuthCallbackHandler();
 
   if (user !== undefined && user !== null) {
-    return <Redirect to="{= onAuthSucceededRedirectTo =}" />;
+    return <Navigate to="{= onAuthSucceededRedirectTo =}" replace />;
   }
 
 

waspc/data/Generator/templates/react-app/src/auth/pages/createAuthRequiredPage.jsx

@@ -1,7 +1,7 @@
 {{={= =}=}}
 import React from 'react'
 
-import { Redirect } from 'react-router-dom'
+import { Navigate } from 'react-router-dom'
 import { useAuth } from 'wasp/client/auth'
 
 import { Loader } from '../../components/Loader'
@@ -17,7 +17,7 @@ const createAuthRequiredPage = (Page) => {
         if (user) {
           return <Page {...props} user={user} />
         } else {
-          return <Redirect to="{= onAuthFailedRedirectTo =}" />
+          return <Navigate to="{= onAuthFailedRedirectTo =}" replace />
         }
       case 'loading':
         return (

waspc/data/Generator/templates/react-app/src/index.tsx

@@ -3,7 +3,7 @@ import React from 'react'
 import ReactDOM from 'react-dom/client'
 import { QueryClientProvider } from '@tanstack/react-query'
 
-import router from './router'
+import { router } from './router'
 import {
   initializeQueryClient,
   queryClientInitialized,

waspc/data/Generator/templates/react-app/src/router.tsx

@@ -1,6 +1,6 @@
 {{={= =}=}}
 import React from 'react'
-import { Route, Switch, BrowserRouter as Router } from 'react-router-dom'
+import { createBrowserRouter, RouterProvider } from 'react-router-dom'
 {=# rootComponent.isDefined =}
 {=& rootComponent.importStatement =}
 {=/ rootComponent.isDefined =}
@@ -25,35 +25,31 @@ export const routeNameToRouteComponent = {
   {=/ routes =}
 } as const;
 
-const router = (
-  <Router basename="{= baseDir =}">
-    {=# rootComponent.isDefined =}
-    <{= rootComponent.importIdentifier =}>
-    {=/ rootComponent.isDefined =}
-    <Switch>
-      {=# isExternalAuthEnabled =}
-      {/* 
-        Wasp specific routes *must* go first to prevent user
-        defined routes from overriding them.
-        Details in https://github.com/wasp-lang/wasp/issues/2029
-      */}
-      <Route exact path="{= oAuthCallbackPath =}">
-        <OAuthCallbackPage />
-      </Route>
-      {=/ isExternalAuthEnabled =}
-      {Object.entries(routes).map(([routeKey, route]) => (
-        <Route
-          exact
-          key={routeKey}
-          path={route.to}
-          component={routeNameToRouteComponent[routeKey]}
-        />
-      ))}
-    </Switch>
-    {=# rootComponent.isDefined =}
-    </{= rootComponent.importIdentifier =}>
-    {=/ rootComponent.isDefined =}
-  </Router>
-)
-
-export default router
+const waspDefinedRoutes = [
+  {=# isExternalAuthEnabled =}
+  {
+    path: "{= oAuthCallbackPath =}",
+    Component: OAuthCallbackPage,
+  },
+  {=/ isExternalAuthEnabled =}
+]
+const userDefinedRoutes = Object.entries(routes).map(([routeKey, route]) => {
+  return {
+    path: route.to,
+    Component: routeNameToRouteComponent[routeKey],
+  }
+})
+
+const browserRouter = createBrowserRouter([{
+  path: '/',
+  {=# rootComponent.isDefined =}
+  element: <{= rootComponent.importIdentifier =} />,
+  {=/ rootComponent.isDefined =}
+  children: [
+    ...waspDefinedRoutes,
+    ...userDefinedRoutes,
+  ],
+}])
+
+
+export const router = <RouterProvider router={browserRouter} />

waspc/data/Generator/templates/sdk/wasp/auth/forms/internal/common/LoginSignupForm.tsx

@@ -25,7 +25,7 @@ import * as SocialIcons from '../social/SocialIcons'
 import { SocialButton } from '../social/SocialButton'
 {=/ isSocialAuthEnabled =}
 {=# isAnyPasswordBasedAuthEnabled =}
-import { useHistory } from 'react-router-dom'
+import { useNavigate } from 'react-router-dom'
 {=/ isAnyPasswordBasedAuthEnabled =}
 {=# enabledProviders.isUsernameAndPasswordAuthEnabled =}
 import { useUsernameAndPassword } from '../usernameAndPassword/useUsernameAndPassword'
@@ -147,7 +147,7 @@ export const LoginSignupForm = ({
   const isLogin = state === 'login'
   const cta = isLogin ? 'Log in' : 'Sign up';
   {=# isAnyPasswordBasedAuthEnabled =}
-  const history = useHistory();
+  const navigate = useNavigate();
   const onErrorHandler = (error) => {
     setErrorMessage({ title: error.message, description: error.data?.data?.message })
   };
@@ -159,7 +159,7 @@ export const LoginSignupForm = ({
     isLogin,
     onError: onErrorHandler,
     onSuccess() {
-      history.push('{= onAuthSucceededRedirectTo =}')
+      navigate('{= onAuthSucceededRedirectTo =}')
     },
   });
   {=/ enabledProviders.isUsernameAndPasswordAuthEnabled =}
@@ -172,7 +172,7 @@ export const LoginSignupForm = ({
       setSuccessMessage(`You've signed up successfully! Check your email for the confirmation link.`)
     },
     onLoginSuccess() {
-      history.push('{= onAuthSucceededRedirectTo =}')
+      navigate('{= onAuthSucceededRedirectTo =}')
     },
   });
   {=/ enabledProviders.isEmailAuthEnabled =}