React Router DOM Update

package.json

@@ -47,7 +47,7 @@
     "react-error-overlay": "^6.0.9",
     "react-google-recaptcha": "^2.1.0",
     "react-iframe": "^1.8.0",
-    "react-router-dom": "^5.2.0",
+    "react-router-dom": "^6.30.1",
     "react-scripts": "5.0.1",
     "react-transition-group": "^4.4.2",
     "universal-cookie": "^4.0.4"

src/Components/Routing/PrivateRoute.js

@@ -1,19 +1,15 @@
 import React from 'react';
-import { Route, Redirect } from 'react-router-dom';
+import { Navigate, useLocation } from 'react-router-dom';
 import { membershipState } from '../../Enums';
 import { allowedIf } from '../../Routes';
 import { useUser } from '../../Components/context/UserContext';
 import { useAuth } from '../../Components/context/AuthContext';
 
-export default function PrivateRoute({
-  component: Component,
-  appProps,
-  ...params
-}) {
+export default function PrivateRoute({ element: Component, appProps, ...params }) {
   const { user } = useUser();
   const { authenticated } = useAuth();
+  const location = useLocation();
 
-  // Check if the user's access level matches with route's access grant
   const PERMISSION_LOOKUP_TABLE = {
     [allowedIf.MEMBER]: user?.accessLevel >= membershipState.MEMBER,
     [allowedIf.OFFICER_OR_ADMIN]: user?.accessLevel >= membershipState.OFFICER,
@@ -23,36 +19,11 @@ export default function PrivateRoute({
 
   const isAllowed = PERMISSION_LOOKUP_TABLE[appProps.allowed] ?? false;
 
-  return (
-    <Route
-      {...params}
-      render={(props) => {
-        if (isAllowed) {
-          return <Component {...appProps} {...props} />;
-        } else if (authenticated) {
-          return (
-            <Redirect
-              to={{
-                pathname: '/',
-              }}
-            />
-          );
-        } else {
-          return (
-            <Route
-              render={(props) => (
-                <Redirect
-                  to={{
-                    pathname:
-                      '/login?redirect=' + encodeURIComponent(params.location.pathname),
-                    state: { from: props.location },
-                  }}
-                />
-              )}
-            />
-          );
-        }
-      }}
-    />
-  );
+  if (isAllowed) {
+    return React.cloneElement(Component, { ...appProps });
+  } else if (authenticated) {
+    return <Navigate to="/" replace />;
+  } else {
+    return <Navigate to={`/login?redirect=${encodeURIComponent(location.pathname)}`} state={{ from: location }} replace />;
+  }
 }

src/Pages/Messaging/Messaging.js

@@ -1,11 +1,11 @@
 import React, { useState, useEffect } from 'react';
 import { sendMessage, connectToRoom } from '../../APIFunctions/Messaging';
-import { useParams, useHistory } from 'react-router-dom/cjs/react-router-dom.min';
+import { useParams, useNavigate } from 'react-router-dom';
 import { useUser } from '../../Components/context/UserContext';
 
 export default function Messaging() {
   const { id } = useParams();
-  const history = useHistory();
+  const history = useNavigate();
   const { user } = useUser();
   const [roomIdInput, setRoomIdInput] = useState(id || '');
   const [roomIdSubmit, setRoomIdSubmit] = useState(id || 'general');

src/Routing.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
+import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
 
 import PrivateRoute from './Components/Routing/PrivateRoute';
 import NavBarWrapper from './Components/Navbar/NavBarWrapper';
@@ -19,7 +19,7 @@ export default function Routing({ appProps }) {
 
   return (
     <div>
-      <Switch>
+      <Routes>
         {signedInRoutes.map(
           ({
             path,
@@ -40,34 +40,33 @@ export default function Routing({ appProps }) {
               />);
             }
             return (
-              <PrivateRoute
+              <Route
                 key={index}
-                exact
                 path={path}
-                appProps={{
-                  allowed: allowedIf,
-                  redirect,
-                  ...appProps
-                }}
-                component={props => getCorrectComponent(props)}
+                element={
+                  <PrivateRoute
+                    appProps={{
+                      allowed: allowedIf,
+                      redirect,
+                      ...appProps
+                    }}
+                  >
+                    {getCorrectComponent({})}
+                  </PrivateRoute>
+                }
               />
             );
           }
         )}
-        {signedOutRoutes.map(({ path, Component }, index) => {
-          return (
-            <Route
-              key={index}
-              exact
-              path={path}
-              render={props => (
-                <NavBarWrapper component={Component} {...props} {...appProps} />
-              )}
-            />
-          );
-        })}
-        <Route component={NotFoundPage} />
-      </Switch>
+        {signedOutRoutes.map(({ path, Component }, index) => (
+          <Route
+            key={index}
+            path={path}
+            element={<NavBarWrapper component={Component} {...appProps} />}
+          />
+        ))}
+        <Route path="*" element={<NotFoundPage />} />
+      </Routes>
     </div>
   );
 }