Update React Router to 6.3.0

generators/client/files-react.js

@@ -236,7 +236,7 @@ const files = {
         // components
         { file: 'shared/auth/private-route.tsx', method: 'processJsx' },
         { file: 'shared/error/error-boundary.tsx', method: 'processJsx' },
-        { file: 'shared/error/error-boundary-route.tsx', method: 'processJsx' },
+        { file: 'shared/error/error-boundary-routes.tsx', method: 'processJsx' },
         { file: 'shared/error/page-not-found.tsx', method: 'processJsx' },
         { file: 'shared/DurationFormat.tsx', method: 'processJsx' },
         // model
@@ -294,7 +294,7 @@ const files = {
         'shared/util/entity-utils.spec.ts',
         'shared/auth/private-route.spec.tsx',
         'shared/error/error-boundary.spec.tsx',
-        'shared/error/error-boundary-route.spec.tsx',
+        'shared/error/error-boundary-routes.spec.tsx',
         'shared/layout/header/header.spec.tsx',
         'shared/layout/menus/account.spec.tsx',
         'modules/administration/administration.reducer.spec.ts',
@@ -372,6 +372,10 @@ function cleanup() {
   if (this.isJhipsterVersionLessThan('7.7.1')) {
     this.removeFile(`${CLIENT_MAIN_SRC_DIR}app/entities/index.tsx`);
   }
+  if (this.isJhipsterVersionLessThan('7.8.2')) {
+    this.removeFile(`${CLIENT_MAIN_SRC_DIR}app/shared/error/error-boundary-route.tsx`);
+    this.removeFile(`${CLIENT_MAIN_SRC_DIR}app/shared/error/error-boundary-route.spec.tsx`);
+  }
 }
 
 function writeFiles() {

generators/client/needle-api/needle-client-react.js

@@ -60,9 +60,9 @@ module.exports = class extends needleClientBase {
       indexModulePath,
       'jhipster-needle-add-route-path',
       this.generator.stripMargin(
-        `|<ErrorBoundaryRoute path={\`\${match.url}${
+        `|<Route path="${
           this.generator.microfrontend && this.generator.applicationTypeMicroservice ? '/' : ''
-        }${entityFileName}\`} component={${entityName}} />`
+        }${entityFileName}/*" element={<${entityName} />} />`
       )
     );
     this.addBlockContentToFile(indexAddRoutePathRewriteFileModel, errorMessage(indexModulePath));

generators/client/templates/react/package.json

@@ -16,7 +16,7 @@
     "react-loadable": "5.5.0",
     "react-redux": "8.0.2",
     "react-redux-loading-bar": "5.0.4",
-    "react-router-dom": "5.3.0",
+    "react-router-dom": "6.3.0",
     "react-toastify": "9.0.3",
     "react-transition-group": "4.4.2",
     "reactstrap": "9.0.3",
@@ -34,7 +34,6 @@
     "@types/react": "18.0.12",
     "@types/react-dom": "18.0.5",
     "@types/react-redux": "7.1.24",
-    "@types/react-router-dom": "5.3.3",
     "@types/redux": "3.6.31",
     "@types/webpack-env": "1.17.0",
     "@typescript-eslint/eslint-plugin": "5.27.0",
@@ -85,4 +84,4 @@
     "webpack-notifier": "1.15.0",
     "workbox-webpack-plugin": "6.5.3"
   }
-}
+}

generators/client/templates/react/package.json.ejs

@@ -77,7 +77,6 @@
     "@types/react": "<%= dependabotPackageJson.devDependencies['@types/react'] %>",
     "@types/react-dom": "<%= dependabotPackageJson.devDependencies['@types/react-dom'] %>",
     "@types/react-redux": "<%= dependabotPackageJson.devDependencies['@types/react-redux'] %>",
-    "@types/react-router-dom": "<%= dependabotPackageJson.devDependencies['@types/react-router-dom'] %>",
     "@types/redux": "<%= dependabotPackageJson.devDependencies['@types/redux'] %>",
 <%_ if (protractorTests) { _%>
     "@types/selenium-webdriver": "4.0.9",

generators/client/templates/react/src/main/webapp/app/app.tsx.ejs

@@ -22,7 +22,7 @@ import 'app/config/dayjs.ts';
 
 import React, { useEffect } from 'react';
 import { Card } from 'reactstrap';
-import { BrowserRouter as Router } from 'react-router-dom';
+import { BrowserRouter } from 'react-router-dom';
 import { ToastContainer, toast } from 'react-toastify';
 
 import { useAppDispatch, useAppSelector } from 'app/config/store';
@@ -59,7 +59,7 @@ export const App = () => {
 
   const paddingTop = '60px';
   return (
-    <Router basename={baseHref}>
+    <BrowserRouter basename={baseHref}>
       <div className="app-container" style={{ paddingTop }}>
         <ToastContainer position={toast.POSITION.TOP_LEFT} className="toastify-container" toastClassName="toastify-toast"/>
         <ErrorBoundary>
@@ -83,7 +83,7 @@ export const App = () => {
           <Footer/>
         </div>
       </div>
-    </Router>
+    </BrowserRouter>
   );
 };
 

generators/client/templates/react/src/main/webapp/app/entities/routes.tsx.ejs

@@ -17,31 +17,33 @@
  limitations under the License.
 -%>
 import React from 'react';
-import { Switch } from 'react-router-dom';
+import { Route } from 'react-router-dom';
+
+import ErrorBoundaryRoutes from 'app/shared/error/error-boundary-routes';
+
 <%_ if (microfrontend || applicationTypeGateway) { _%>
 import { ReducersMapObject, combineReducers } from '@reduxjs/toolkit';
 
 import getStore from 'app/config/store';
 <%_ } _%>
-import ErrorBoundaryRoute from 'app/shared/error/error-boundary-route';
 <%_ if (microfrontend || applicationTypeGateway) { _%>
 
 import entitiesReducers from './reducers';
 <%_ } _%>
 
 /* jhipster-needle-add-route-import - JHipster will add routes here */
 
-export default ({ match }) => {
+export default () => {
 <%_ if (microfrontend || applicationTypeGateway) { _%>
   const store = getStore();
   store.injectReducer('<%= lowercaseBaseName %>', combineReducers(entitiesReducers as ReducersMapObject));
 <%_ } _%>
   return (
     <div>
-      <Switch>
+      <ErrorBoundaryRoutes>
         {/* prettier-ignore */}
         {/* jhipster-needle-add-route-path - JHipster will add routes here */}
-      </Switch>
+      </ErrorBoundaryRoutes>
     </div>
   );
 };

generators/client/templates/react/src/main/webapp/app/modules/account/activate/activate.tsx.ejs

@@ -17,9 +17,9 @@
  limitations under the License.
 -%>
 import React, { useEffect } from 'react';
-import { Link, RouteComponentProps } from 'react-router-dom';
+import { Link,  useSearchParams } from 'react-router-dom';
 import { Row, Col, Alert } from 'reactstrap';
-import { Translate, getUrlParameter } from 'react-jhipster';
+import { Translate } from 'react-jhipster';
 
 import { useAppDispatch, useAppSelector } from 'app/config/store';
 import { activateAction, reset } from './activate.reducer';
@@ -43,10 +43,14 @@ const failureAlert = (
   </Alert>
 );
 
-export const ActivatePage = (props: RouteComponentProps<{ key: any }>) => {
+export const ActivatePage = () => {
   const dispatch = useAppDispatch();
+
+  const [searchParams] = useSearchParams();
+
   useEffect(() => {
-    const key = getUrlParameter('key', props.location.search);
+    const key = searchParams.get("key");
+
     dispatch(activateAction(key));
     return () => {
       dispatch(reset());

generators/client/templates/react/src/main/webapp/app/modules/account/index.tsx.ejs

@@ -17,23 +17,26 @@
  limitations under the License.
 -%>
 import React from 'react';
+import { Route } from 'react-router-dom';
 
-import ErrorBoundaryRoute from 'app/shared/error/error-boundary-route';
+import ErrorBoundaryRoutes from 'app/shared/error/error-boundary-routes';
 
 import Settings from './settings/settings';
 import Password from './password/password';
 <%_ if (authenticationTypeSession) { _%>
 import Sessions from './sessions/sessions';
 <%_ } _%>
 
-const Routes = ({ match }) => (
+const AccountRoutes = () => (
   <div>
-    <ErrorBoundaryRoute path={`${match.url}/settings`} component={Settings} />
-    <ErrorBoundaryRoute path={`${match.url}/password`} component={Password} />
+    <ErrorBoundaryRoutes>
+      <Route path="settings" element={<Settings />} />
+      <Route path="password" element={<Password />} />
 <%_ if (authenticationTypeSession) { _%>
-    <ErrorBoundaryRoute path={`${match.url}/sessions`} component={Sessions} />
+      <Route path="sessions" element={<Sessions />} />
 <%_ } _%>
+    </ErrorBoundaryRoutes>
   </div>
 );
 
-export default Routes;
+export default AccountRoutes;

generators/client/templates/react/src/main/webapp/app/modules/account/password-reset/finish/password-reset-finish.tsx.ejs

@@ -18,19 +18,22 @@
 -%>
 import React, { useState, useEffect } from 'react';
 import { Col, Row, Button } from 'reactstrap';
-import { Translate, translate, getUrlParameter, ValidatedField, ValidatedForm } from 'react-jhipster';
-import { RouteComponentProps } from 'react-router-dom';
+import { Translate, translate, ValidatedField, ValidatedForm } from 'react-jhipster';
+import { useSearchParams } from 'react-router-dom';
 import { toast } from 'react-toastify';
 
 import { handlePasswordResetFinish, reset } from '../password-reset.reducer';
 import PasswordStrengthBar from 'app/shared/layout/password/password-strength-bar';
 import { useAppDispatch, useAppSelector } from 'app/config/store';
 
-export const PasswordResetFinishPage = (props: RouteComponentProps<{ key: string }>) => {
-  const [password, setPassword] = useState('');
-  const [key] = useState(getUrlParameter('key', props.location.search));
+export const PasswordResetFinishPage = () => {
   const dispatch = useAppDispatch();
 
+  const [searchParams] = useSearchParams();
+  const key = searchParams.get('key');
+
+  const [password, setPassword] = useState('');
+
   useEffect(
     () => () => {
       dispatch(reset());

generators/client/templates/react/src/main/webapp/app/modules/administration/index.tsx.ejs

@@ -18,7 +18,8 @@
 -%>
 import React from 'react';
 
-import ErrorBoundaryRoute from 'app/shared/error/error-boundary-route';
+import { Route } from 'react-router-dom';
+import ErrorBoundaryRoutes from 'app/shared/error/error-boundary-routes';
 <%_ if (!skipUserManagement) { _%>
 import UserManagement from './user-management';
 <%_ } _%>
@@ -36,25 +37,27 @@ import Gateway from './gateway/gateway';
 import Tracker from './tracker/tracker';
 <%_ } _%>
 
-const Routes = ({ match }) => (
+const AdministrationRoutes = () => (
   <div>
+    <ErrorBoundaryRoutes>
 <%_ if (!skipUserManagement) { _%>
-    <ErrorBoundaryRoute path={`${match.url}/user-management`} component={UserManagement} />
+      <Route path="user-management/*" element={<UserManagement />} />
 <%_ } _%>
 <%_ if (communicationSpringWebsocket) { _%>
-    <ErrorBoundaryRoute exact path={`${match.url}/tracker`} component={Tracker} />
+      <Route path="tracker" element={<Tracker />} />
 <%_ } _%>
 <%_ if (applicationTypeGateway && serviceDiscoveryType) { _%>
-    <ErrorBoundaryRoute exact path={`${match.url}/gateway`} component={Gateway} />
+      <Route path="gateway" element={<Gateway />} />
 <%_ } _%>
 <%_ if (withAdminUi) { _%>
-    <ErrorBoundaryRoute exact path={`${match.url}/health`} component={Health} />
-    <ErrorBoundaryRoute exact path={`${match.url}/metrics`} component={Metrics} />
-    <ErrorBoundaryRoute exact path={`${match.url}/configuration`} component={Configuration} />
-    <ErrorBoundaryRoute exact path={`${match.url}/logs`} component={Logs} />
+      <Route path="health" element={<Health />} />
+      <Route path="metrics" element={<Metrics />} />
+      <Route path="configuration" element={<Configuration />} />
+      <Route path="logs" element={<Logs />} />
   <%_ } _%>
-    <ErrorBoundaryRoute exact path={`${match.url}/docs`} component={Docs} />
+      <Route path="docs" element={<Docs />} />
+    </ErrorBoundaryRoutes>
   </div>
 );
 
-export default Routes;
+export default AdministrationRoutes;

generators/client/templates/react/src/main/webapp/app/modules/administration/user-management/index.tsx.ejs

@@ -17,24 +17,24 @@
  limitations under the License.
 -%>
 import React from 'react';
-import { Switch } from 'react-router-dom';
+import { Route } from 'react-router-dom';
 
-import ErrorBoundaryRoute from 'app/shared/error/error-boundary-route';
+import ErrorBoundaryRoutes from 'app/shared/error/error-boundary-routes';
 import UserManagement from './user-management';
 import UserManagementDetail from './user-management-detail';
 import UserManagementUpdate from './user-management-update';
 import UserManagementDeleteDialog from './user-management-delete-dialog';
 
-const Routes = ({ match }) => (
-  <>
-    <Switch>
-      <ErrorBoundaryRoute exact path={`${match.url}/new`} component={UserManagementUpdate} />
-      <ErrorBoundaryRoute exact path={`${match.url}/:login/edit`} component={UserManagementUpdate} />
-      <ErrorBoundaryRoute exact path={`${match.url}/:login`} component={UserManagementDetail} />
-      <ErrorBoundaryRoute path={match.url} component={UserManagement} />
-    </Switch>
-    <ErrorBoundaryRoute path={`${match.url}/:login/delete`} component={UserManagementDeleteDialog} />
-  </>
+const UserManagementRoutes = () => (
+  <ErrorBoundaryRoutes>
+    <Route index element={<UserManagement />} />
+    <Route path="new" element={<UserManagementUpdate />} />
+    <Route path=":login">
+      <Route index element={<UserManagementDetail />} />
+      <Route path="edit" element={<UserManagementUpdate />} />
+      <Route path="delete" element={<UserManagementDeleteDialog />} />
+    </Route>
+  </ErrorBoundaryRoutes>
 );
 
-export default Routes;
+export default UserManagementRoutes;

generators/client/templates/react/src/main/webapp/app/modules/administration/user-management/user-management-delete-dialog.tsx.ejs

@@ -17,24 +17,27 @@
  limitations under the License.
 -%>
 import React, { useEffect } from 'react';
-import { RouteComponentProps } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
 import { Modal, ModalHeader, ModalBody, ModalFooter, Button } from 'reactstrap';
 import { Translate } from 'react-jhipster';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 import { getUser, deleteUser } from './user-management.reducer';
 import { useAppDispatch, useAppSelector } from 'app/config/store';
 
-export const UserManagementDeleteDialog = (props: RouteComponentProps<{ login: string }>) => {
+export const UserManagementDeleteDialog = () => {
   const dispatch = useAppDispatch();
 
+  const navigate = useNavigate();
+  const { login } = useParams<'login'>();
+
   useEffect(() => {
-    dispatch(getUser(props.match.params.login));
+    dispatch(getUser(login));
   }, []);
 
   const handleClose = event => {
     event.stopPropagation();
-    props.history.push('/admin/user-management');
+    navigate('/admin/user-management');
   };
 
   const user = useAppSelector(state => state.userManagement.user);

generators/client/templates/react/src/main/webapp/app/modules/administration/user-management/user-management-detail.tsx.ejs

@@ -17,7 +17,7 @@
  limitations under the License.
 -%>
 import React, { useEffect } from 'react';
-import { Link, RouteComponentProps } from 'react-router-dom';
+import { Link, useParams } from 'react-router-dom';
 import { Button, Row, Badge } from 'reactstrap';
 import { Translate, TextFormat } from 'react-jhipster';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -27,11 +27,13 @@ import { APP_DATE_FORMAT } from 'app/config/constants';
 import { getUser } from './user-management.reducer';
 import { useAppDispatch, useAppSelector } from 'app/config/store';
 
-export const UserManagementDetail = (props: RouteComponentProps<{ login: string }>) => {
+export const UserManagementDetail = () => {
   const dispatch = useAppDispatch();
 
+  const { login } = useParams<'login'>();
+
   useEffect(() => {
-    dispatch(getUser(props.match.params.login));
+    dispatch(getUser(login));
   }, []);
 
   const user = useAppSelector(state => state.userManagement.user);