generator-jhipster 7.7.0 → 7.9.0

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

@@ -17,7 +17,7 @@
  limitations under the License.
 -%>
 import React, { useState, useEffect } from 'react';
-import { Link, RouteComponentProps } from 'react-router-dom';
+import { Link, useLocation, useNavigate } from 'react-router-dom';
 import { Button, Table, Badge } from 'reactstrap';
 import {
   Translate,
@@ -34,10 +34,15 @@ import { overridePaginationStateWithQueryParams } from 'app/shared/util/entity-u
 import { getUsersAsAdmin, updateUser } from './user-management.reducer';
 import { useAppDispatch, useAppSelector } from 'app/config/store';
 
-export const UserManagement = (props: RouteComponentProps<any>) => {
+export const UserManagement = () => {
   const dispatch = useAppDispatch();
 
-  const [pagination, setPagination] = useState(overridePaginationStateWithQueryParams(getSortState(props.location, ITEMS_PER_PAGE, '<%= user.primaryKey.name %>'), props.location.search));
+  const location = useLocation();
+  const navigate = useNavigate();
+
+  const [pagination, setPagination] = useState(
+    overridePaginationStateWithQueryParams(getSortState(location, ITEMS_PER_PAGE, 'id'), location.search)
+  );
 
   const getUsersFromProps = () => {
     dispatch(
@@ -48,8 +53,8 @@ export const UserManagement = (props: RouteComponentProps<any>) => {
       })
     );
     const endURL = `?page=${pagination.activePage}&sort=${pagination.sort},${pagination.order}`;
-    if (props.location.search !== endURL) {
-      props.history.push(`${props.location.pathname}${endURL}`);
+    if (location.search !== endURL) {
+      navigate(`${location.pathname}${endURL}`);
     }
   };
 
@@ -58,7 +63,7 @@ export const UserManagement = (props: RouteComponentProps<any>) => {
   }, [pagination.activePage, pagination.order, pagination.sort]);
 
   useEffect(() => {
-    const params = new URLSearchParams(props.location.search);
+    const params = new URLSearchParams(location.search);
     const page = params.get('page');
     const sortParam = params.get(SORT);
     if (page && sortParam) {
@@ -70,7 +75,7 @@ export const UserManagement = (props: RouteComponentProps<any>) => {
         order: sortSplit[1]
       });
     }
-  }, [props.location.search]);
+  }, [location.search]);
 
   const sort = p => () =>
     setPagination({
@@ -89,15 +94,15 @@ export const UserManagement = (props: RouteComponentProps<any>) => {
     getUsersFromProps();
   };
 
-  const toggleActive = user => () =>
+  const toggleActive = user => () => {
     dispatch(
       updateUser({
         ...user,
         activated: !user.activated,
       })
     );
+  };
 
-  const { match } = props;
   const account = useAppSelector(state => state.authentication.account);
   const users = useAppSelector(state => state.userManagement.users);
   const totalItems = useAppSelector(state => state.userManagement.totalItems);
@@ -111,7 +116,7 @@ export const UserManagement = (props: RouteComponentProps<any>) => {
           <Button className="me-2" color="info" onClick={handleSyncList} disabled={loading}>
             <FontAwesomeIcon icon="sync" spin={loading} /> <Translate contentKey="userManagement.home.refreshListLabel">Refresh List</Translate>
           </Button>
-          <Link to={`${match.url}/new`} className="btn btn-primary jh-create-entity">
+          <Link to="new" className="btn btn-primary jh-create-entity">
             <FontAwesomeIcon icon="plus" /> <Translate contentKey="userManagement.home.createLabel">Create a new user</Translate>
           </Link>
         </div>
@@ -144,10 +149,7 @@ export const UserManagement = (props: RouteComponentProps<any>) => {
           users.map((user, i) => (
             <tr id={user.login} key={`user-${i}`}>
               <td>
-                <Button
-                  tag={Link} to={`${match.url}/${user.login}`}
-                  color="link" size="sm"
-                >
+                <Button tag={Link} to={user.login} color="link" size="sm">
                   {user.id}
                 </Button>
               </td>
@@ -190,22 +192,13 @@ export const UserManagement = (props: RouteComponentProps<any>) => {
 <%_ } _%>
               <td className="text-end">
                 <div className="btn-group flex-btn-group-container">
-                  <Button
-                    tag={Link} to={`${match.url}/${user.login}`}
-                    color="info" size="sm"
-                  >
-                    <FontAwesomeIcon icon="eye" /> <span className="d-none d-md-inline" ><Translate contentKey="entity.action.view">View</Translate></span>
+                  <Button tag={Link} to={user.login} color="info" size="sm">
+                    <FontAwesomeIcon icon="eye" /> <span className="d-none d-md-inline"><Translate contentKey="entity.action.view">View</Translate></span>
                   </Button>
-                  <Button
-                    tag={Link} to={`${match.url}/${user.login}/edit`}
-                    color="primary" size="sm"
-                  >
+                  <Button tag={Link} to={`${user.login}/edit`} color="primary" size="sm">
                     <FontAwesomeIcon icon="pencil-alt" /> <span className="d-none d-md-inline"><Translate contentKey="entity.action.edit">Edit</Translate></span>
                   </Button>
-                  <Button
-                    tag={Link} to={`${match.url}/${user.login}/delete`}
-                    color="danger" size="sm" disabled={account.login === user.login}
-                  >
+                  <Button tag={Link} to={`${user.login}/delete`} color="danger" size="sm" disabled={account.login === user.login}>
                     <FontAwesomeIcon icon="trash" /> <span className="d-none d-md-inline"><Translate contentKey="entity.action.delete">Delete</Translate></span>
                   </Button>
                 </div>

package/generators/client/templates/react/src/main/webapp/app/modules/login/login-modal.tsx.ejs

@@ -42,9 +42,13 @@ const LoginModal = (props: ILoginModalProps) => {
 
   const { loginError, handleClose } = props;
 
+  const handleLoginSubmit = e => {
+    handleSubmit(login)(e);
+  };
+
   return (
     <Modal isOpen={props.showModal} toggle={handleClose} backdrop="static" id="login-page" autoFocus={false}>
-      <Form onSubmit={handleSubmit(login)}>
+      <Form onSubmit={handleLoginSubmit}>
           <ModalHeader id="login-title" data-cy="loginTitle" toggle={handleClose}><Translate contentKey="login.title">Sign in</Translate></ModalHeader>
           <ModalBody>
             <Row>

package/generators/client/templates/react/src/main/webapp/app/modules/login/login-redirect.tsx.ejs

@@ -1,13 +1,16 @@
 import React, { useEffect } from 'react';
 import { REDIRECT_URL } from 'app/shared/util/url-utils';
+import { useLocation } from 'react-router';
+
+export const LoginRedirect = () => {
+  const location = useLocation();
 
-export const LoginRedirect = (props) => {
   useEffect(() => {
-    localStorage.setItem(REDIRECT_URL, props.location.state.from.pathname);
+    localStorage.setItem(REDIRECT_URL, (location.state as any).from.pathname);
     window.location.reload();
   });
 
   return null;
 };
 
-export default LoginRedirect;
+export default LoginRedirect;

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

@@ -17,18 +17,20 @@
  limitations under the License.
 -%>
 import React, { useState, useEffect } from 'react';
-import { Redirect, RouteComponentProps } from 'react-router-dom';
+import { Navigate, useLocation, useNavigate } from 'react-router-dom';
 
 import { useAppDispatch, useAppSelector } from 'app/config/store';
 import { login } from 'app/shared/reducers/authentication';
 import LoginModal from './login-modal';
 
-export const Login = (props: RouteComponentProps<any>) => {
+export const Login = () => {
   const dispatch = useAppDispatch();
   const isAuthenticated = useAppSelector(state => state.authentication.isAuthenticated);
   const loginError = useAppSelector(state => state.authentication.loginError);
   const showModalLogin = useAppSelector(state => state.authentication.showModalLogin);
   const [showModal, setShowModal] = useState(showModalLogin);
+  const navigate = useNavigate();
+  const location = useLocation();
 
   useEffect(() => {
     setShowModal(true);
@@ -38,13 +40,12 @@ export const Login = (props: RouteComponentProps<any>) => {
 
   const handleClose = () => {
     setShowModal(false);
-    props.history.push('/');
+    navigate('/');
   };
 
-  const { location } = props;
   const { from } = location.state as any || { from: { pathname: '/', search: location.search } };
   if (isAuthenticated) {
-    return <Redirect to={from} />;
+    return <Navigate to={from} replace />;
   }
   return <LoginModal showModal={showModal} handleLogin={handleLogin} handleClose={handleClose} loginError={loginError} />;
 };

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

@@ -16,8 +16,8 @@
  See the License for the specific language governing permissions and
  limitations under the License.
 -%>
-import React from 'react';
-import { Switch <% if (communicationSpringWebsocket) { %>, useLocation <% } %>} from 'react-router-dom';
+import React<% if (applicationTypeGateway && microfrontend) { %>, { Suspense }<% } %> from 'react';
+import { Route <% if (communicationSpringWebsocket) { %>, useLocation <% } %>} from 'react-router-dom';
 import Loadable from 'react-loadable';
 
 <%_ if (!authenticationTypeOauth2) { _%>
@@ -34,28 +34,36 @@ import PasswordResetFinish from 'app/modules/account/password-reset/finish/passw
 <%_ } _%>
 import Logout from 'app/modules/login/logout';
 import Home from 'app/modules/home/home';
-import Entities from 'app/entities';
+import EntitiesRoutes from 'app/entities/routes';
 import PrivateRoute from 'app/shared/auth/private-route';
-import ErrorBoundaryRoute from 'app/shared/error/error-boundary-route';
+import ErrorBoundaryRoutes from 'app/shared/error/error-boundary-routes';
 import PageNotFound from 'app/shared/error/page-not-found';
 import { AUTHORITIES } from 'app/config/constants';
 <%_ if (communicationSpringWebsocket) { _%>
 import { sendActivity } from 'app/config/websocket-middleware';
 <%_ } _%>
 
+const loading = <div>loading ...</div>;
 <%_ if (!skipUserManagement) { _%>
-const Account = Loadable({
+
+  const Account = Loadable({
   loader: () => import(/* webpackChunkName: "account" */ 'app/modules/account'),
-  loading: () => <div>loading ...</div>
+  loading: () => loading,
 });
 <%_ } _%>
 
 const Admin = Loadable({
   loader: () => import(/* webpackChunkName: "administration" */ 'app/modules/administration'),
-  loading: () => <div>loading ...</div>
+  loading: () => loading,
 });
+<%_ if (applicationTypeGateway && microfrontend) { _%>
+
+  <%_ for (const remote of microfrontends) { _%>
+const <%= remote.capitalizedBaseName %>Routes = React.lazy(() => import('@<%= remote.lowercaseBaseName %>/entities-routes').catch(() => import('app/shared/error/error-loading')));
+  <%_ } _%>
+<%_ } _%>
 
-const Routes = () => {
+const AppRoutes = () => {
 <%_ if (communicationSpringWebsocket) { _%>
   const location = useLocation();
   React.useEffect(() => {
@@ -64,30 +72,67 @@ const Routes = () => {
 <%_ } _%>
   return (
     <div className="view-routes">
-      <Switch>
+      <ErrorBoundaryRoutes>
+        <Route index element={<Home />} />
 <%_ if (!authenticationTypeOauth2) { _%>
-        <ErrorBoundaryRoute path="/login" component={Login} />
+        <Route path="login" element={<Login />} />
 <%_ } _%>
-        <ErrorBoundaryRoute path="/logout" component={Logout} />
+        <Route path="logout" element={<Logout />} />
 <%_ if (!skipUserManagement) { _%>
-        <ErrorBoundaryRoute path="/account/register" component={Register} />
-        <ErrorBoundaryRoute path="/account/activate/:key?" component={Activate} />
-        <ErrorBoundaryRoute path="/account/reset/request" component={PasswordResetInit} />
-        <ErrorBoundaryRoute path="/account/reset/finish/:key?" component={PasswordResetFinish} />
+        <Route path="account">
+          <Route
+            path="*"
+            element={
+              <PrivateRoute hasAnyAuthorities={[AUTHORITIES.ADMIN, AUTHORITIES.USER]}>
+                <Account />
+              </PrivateRoute>
+            }
+          />
+          <Route path="register" element={<Register />} />
+          <Route path="activate" element={<Activate />} />
+          <Route path="reset">
+            <Route path="request" element={<PasswordResetInit />} />
+            <Route path="finish" element={<PasswordResetFinish />} />
+          </Route>
+        </Route>
 <%_ } _%>
-        <PrivateRoute path="/admin" component={Admin} hasAnyAuthorities={[AUTHORITIES.ADMIN]}/>
-<%_ if (!skipUserManagement) { _%>
-        <PrivateRoute path="/account" component={Account} hasAnyAuthorities={[AUTHORITIES.ADMIN, AUTHORITIES.USER]}/>
-<%_ } _%>
-        <ErrorBoundaryRoute path="/" exact component={Home}/>
+        <Route
+          path="admin/*"
+          element={
+            <PrivateRoute hasAnyAuthorities={[AUTHORITIES.ADMIN]}>
+              <Admin />
+            </PrivateRoute>
+          }
+        />
 <%_ if (authenticationTypeOauth2) { _%>
-        <ErrorBoundaryRoute path="/oauth2/authorization/oidc" component={LoginRedirect} />
+        <Route path="oauth2/authorization/oidc" element={<LoginRedirect />} />
+<%_ } _%>
+<%_ if (applicationTypeGateway && microfrontend) { _%>
+  <%_ for (const remote of microfrontends) { _%>
+        <Route
+          path="<%= remote.lowercaseBaseName %>/*"
+          element={
+            <Suspense fallback={loading}>
+              <PrivateRoute hasAnyAuthorities={[AUTHORITIES.USER]}>
+                <<%= remote.capitalizedBaseName %>Routes />
+              </PrivateRoute>
+            </Suspense>
+          }
+        />
+  <%_ } _%>
 <%_ } _%>
-        <PrivateRoute path="/" component={Entities} hasAnyAuthorities={[AUTHORITIES.USER]}/>
-        <ErrorBoundaryRoute component={PageNotFound} />
-      </Switch>
+        <Route
+          path="<%= microfrontend && applicationTypeMicroservice ? lowercaseBaseName + '/' : '' %>*"
+          element={
+            <PrivateRoute hasAnyAuthorities={[AUTHORITIES.USER]}>
+              <EntitiesRoutes />
+            </PrivateRoute>
+          }
+        />
+        <Route path="*" element={<PageNotFound />} />
+      </ErrorBoundaryRoutes>
     </div>
   );
 };
 
-export default Routes;
+export default AppRoutes;

package/generators/client/templates/react/src/main/webapp/app/shared/auth/private-route.spec.tsx.ejs

@@ -1,6 +1,5 @@
 import React from 'react';
-import { Router } from 'react-router-dom';
-import { createMemoryHistory } from 'history';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
 import { render } from '@testing-library/react';
 <%_ if (enableTranslation) { _%>
 import { TranslatorContext } from 'react-jhipster';
@@ -10,7 +9,7 @@ import thunk from 'redux-thunk';
 import { Provider } from 'react-redux';
 
 import { AUTHORITIES } from 'app/config/constants';
-import { PrivateRouteComponent, hasAnyAuthority } from './private-route';
+import PrivateRoute, { hasAnyAuthority } from './private-route';
 
 const TestComp = () => <div>Test</div>;
 
@@ -26,15 +25,19 @@ describe('private-route component', () => {
   const mockStore = configureStore([thunk]);
   const wrapper = (Elem: JSX.Element, authentication) => {
     const store = mockStore({ authentication });
-    return render(<Provider store={store}>{Elem}</Provider>);
+    return render(
+      <Provider store={store}>
+        <MemoryRouter>{Elem}</MemoryRouter>
+      </Provider>
+    );
   };
 
   // All tests will go here
-  it('Should throw error when no component is provided', () => {
+  it('Should throw error when falsy children are provided', () => {
     const originalError = console.error;
     console.error = jest.fn();
     expect(() =>
-      wrapper(<PrivateRouteComponent component={null} path="/" />, {
+      wrapper(<PrivateRoute>{null}</PrivateRoute>, {
         isAuthenticated: true,
         sessionHasBeenFetched: true,
         account: {
@@ -46,11 +49,10 @@ describe('private-route component', () => {
   });
 
   it('Should render an error message when the user has no authorities', () => {
-    const history = createMemoryHistory();
     const { container } = wrapper(
-      <Router history={history}>
-        <PrivateRouteComponent component={TestComp} path="/" />
-      </Router>,
+      <PrivateRoute>
+        <TestComp />
+      </PrivateRoute>,
       {
         isAuthenticated: true,
         sessionHasBeenFetched: true,
@@ -59,23 +61,16 @@ describe('private-route component', () => {
         },
       }
     );
-<%_ if (enableTranslation) { _%>
-    expect(container.innerHTML).toEqual(
-      '<div class="insufficient-authority"><div class="alert alert-danger"><span>You are not authorized to access this page.</span></div></div>'
-    );
-<%_ } else { _%>
-    expect(container.innerHTML).toEqual(
-      '<div class="insufficient-authority"><div class="alert alert-danger">You are not authorized to access this page.</div></div>'
+    expect(container.innerHTML).toMatch(
+      /<div class="insufficient-authority"><div class="alert alert-danger">.*<\/div><\/div>/
     );
-<%_ } _%>
   });
 
   it('Should render a route for the component provided when authenticated', () => {
-    const history = createMemoryHistory();
     const { container } = wrapper(
-      <Router history={history}>
-        <PrivateRouteComponent component={TestComp} path="/" />
-      </Router>,
+      <PrivateRoute>
+        <TestComp />
+      </PrivateRoute>,
       {
         isAuthenticated: true,
         sessionHasBeenFetched: true,
@@ -87,12 +82,19 @@ describe('private-route component', () => {
     expect(container.innerHTML).toEqual('<div>Test</div>');
   });
 
-  it('Should render a redirect to login when not authenticated', () => {
-    const history = createMemoryHistory();
+  it('Should redirect when not authenticated', () => {
     const { container } = wrapper(
-      <Router history={history}>
-        <PrivateRouteComponent exact component={TestComp} path="/" />
-      </Router>,
+      <Routes>
+        <Route
+          path="/"
+          element={
+            <PrivateRoute>
+              <TestComp />
+            </PrivateRoute>
+          }
+        />
+        <Route path="<% if(authenticationTypeOauth2) { %>/oauth2/authorization/oidc<% } else { %>/login<% } %>" element={<div>Login</div>} />
+      </Routes>,
       {
         isAuthenticated: false,
         sessionHasBeenFetched: true,
@@ -102,6 +104,7 @@ describe('private-route component', () => {
       }
     );
     expect(container.innerHTML).not.toEqual('<div>Test</div>');
+    expect(container.innerHTML).toEqual('<div>Login</div>');
   });
 });
 

package/generators/client/templates/react/src/main/webapp/app/shared/auth/private-route.tsx.ejs

@@ -1,54 +1,54 @@
 import React from 'react';
-import { Route, Redirect, RouteProps } from 'react-router-dom';
+import { RouteProps, useLocation, Navigate } from 'react-router-dom';
 import { Translate } from 'react-jhipster';
+
 import { useAppSelector } from 'app/config/store';
 import ErrorBoundary from 'app/shared/error/error-boundary';
 
 interface IOwnProps extends RouteProps {
   hasAnyAuthorities?: string[];
+  children: React.ReactNode;
 }
 
-export const PrivateRouteComponent = ({ component: Component, hasAnyAuthorities = [], ...rest }: IOwnProps) => {
+export const PrivateRoute = ({ children, hasAnyAuthorities = [], ...rest }: IOwnProps) => {
   const isAuthenticated = useAppSelector(state => state.authentication.isAuthenticated);
   const sessionHasBeenFetched = useAppSelector(state => state.authentication.sessionHasBeenFetched);
   const account = useAppSelector(state => state.authentication.account);
   const isAuthorized = hasAnyAuthority(account.authorities, hasAnyAuthorities);
+  const location = useLocation();
+
+  if (!children) {
+    throw new Error(`A component needs to be specified for private route for path ${(rest as any).path}`);
+  }
 
-  const checkAuthorities = props =>
-    isAuthorized ? (
-      <ErrorBoundary>
-        <Component {...props} />
-      </ErrorBoundary>
-    ) : (
+  if (!sessionHasBeenFetched) {
+    return <div></div>;
+  }
+
+  if (isAuthenticated) {
+    if (isAuthorized) {
+      return <ErrorBoundary>{children}</ErrorBoundary>;
+    }
+
+    return (
       <div className="insufficient-authority">
         <div className="alert alert-danger">
           <Translate contentKey="error.http.403">You are not authorized to access this page.</Translate>
         </div>
       </div>
     );
+  }
 
-    const renderRedirect = props => {
-      if (!sessionHasBeenFetched) {
-        return (<div></div>);
-      } else {
-        return isAuthenticated ? (
-          checkAuthorities(props)
-        ) : (
-          <Redirect
-            to={{
-              pathname: '<%_ if (authenticationTypeOauth2) { _%>/oauth2/authorization/oidc<%_ } else {_%>/login<%_ } _%>',
-              search: props.location.search,
-              state: { from: props.location }
-            }}
-          />
-        );
-      }
-    };
-
-
-  if (!Component) throw new Error(`A component needs to be specified for private route for path ${(rest as any).path}`);
-
-  return <Route {...rest} render={renderRedirect} />;
+  return (
+    <Navigate
+      to={{
+        pathname: '<%_ if (authenticationTypeOauth2) { _%>/oauth2/authorization/oidc<%_ } else {_%>/login<%_ } _%>',
+        search: location.search,
+      }}
+      replace
+      state={{ from: location }}
+    />
+  );
 };
 
 export const hasAnyAuthority = (authorities: string[], hasAnyAuthorities: string[]) => {
@@ -62,8 +62,9 @@ export const hasAnyAuthority = (authorities: string[], hasAnyAuthorities: string
 };
 
 /**
- * A route wrapped in an authentication check so that routing happens only when you are authenticated.
- * Accepts same props as React router Route.
- * The route also checks for authorization if hasAnyAuthorities is specified.
+ * Checks authentication before showing the children and redirects to the
+ * login page if the user is not authenticated.
+ * If hasAnyAuthorities is provided the authorization status is also
+ * checked and an error message is shown if the user is not authorized.
  */
-export default PrivateRouteComponent;
+export default PrivateRoute;

package/generators/client/templates/react/src/main/webapp/app/shared/error/error-boundary-routes.spec.tsx.ejs

@@ -0,0 +1,55 @@
+import React from 'react';
+import { MemoryRouter, Route } from 'react-router-dom';
+import { render } from '@testing-library/react';
+
+import ErrorBoundaryRoutes from './error-boundary-routes';
+
+const ErrorComp = (): JSX.Element => {
+  throw new Error('test');
+};
+
+const NoErrorComp = (): JSX.Element => {
+  return <div>No error</div>;
+};
+
+describe('error-boundary-routes component', () => {
+  beforeEach(() => {
+    // ignore console and jsdom errors
+    jest.spyOn((window as any)._virtualConsole, 'emit').mockImplementation(() => false);
+    jest.spyOn((window as any).console, 'error').mockImplementation(() => false);
+  });
+
+  it('Should render fallback component when an uncaught error is thrown in route', () => {
+    const { container } = render(
+      <MemoryRouter>
+        <ErrorBoundaryRoutes>
+          <Route path="*" element={<ErrorComp />} />
+        </ErrorBoundaryRoutes>
+      </MemoryRouter>
+    );
+    expect(container.innerHTML).toEqual('<div><h2 class="error">An unexpected error has occurred.</h2></div>');
+  });
+
+  it('Should not render fallback component when route with uncaught error is not matched', () => {
+    const { container } = render(
+      <MemoryRouter initialEntries={['/path']}>
+        <ErrorBoundaryRoutes>
+          <Route path="/path" element={<NoErrorComp />} />
+          <Route path="*" element={<ErrorComp />} />
+        </ErrorBoundaryRoutes>
+      </MemoryRouter>
+    );
+    expect(container.innerHTML).toEqual('<div>No error</div>');
+  });
+
+  it('Should not render fallback component when no uncaught error is thrown', () => {
+    const { container } = render(
+      <MemoryRouter>
+        <ErrorBoundaryRoutes>
+          <Route path="*" element={<NoErrorComp />} />
+        </ErrorBoundaryRoutes>
+      </MemoryRouter>
+    );
+    expect(container.innerHTML).toEqual('<div>No error</div>');
+  });
+});

package/generators/client/templates/react/src/main/webapp/app/shared/error/error-boundary-routes.tsx.ejs

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Outlet, Route, Routes, RoutesProps } from 'react-router-dom';
+import ErrorBoundary from 'app/shared/error/error-boundary';
+
+const ErrorBoundaryRoutes = ({ children }: RoutesProps) => {
+  return (
+    <Routes>
+      <Route
+        element={
+          <ErrorBoundary>
+            <Outlet />
+          </ErrorBoundary>
+        }
+      >
+        {children}
+      </Route>
+    </Routes>
+  );
+};
+
+export default ErrorBoundaryRoutes;

package/generators/client/templates/react/src/main/webapp/app/shared/error/error-boundary.spec.tsx.ejs

@@ -16,7 +16,7 @@ describe('error component', () => {
     jest.spyOn((window as any).console, 'error').mockImplementation(() => false);
   });
 
-  it('Should throw an error when componnet is not enclosed in Error Boundary', () => {
+  it('Should throw an error when component is not enclosed in Error Boundary', () => {
     expect(() => render(<ErrorComp />)).toThrow(Error);
   });
 

package/generators/client/templates/react/src/main/webapp/app/shared/error/error-boundary.tsx.ejs

@@ -1,7 +1,7 @@
 import React from 'react';
 
 interface IErrorBoundaryProps {
-  readonly children: JSX.Element | JSX.Element[];
+  readonly children: React.ReactNode;
 }
 
 interface IErrorBoundaryState {