feat: update to react-router-dom@6

chore: refactor all routes to use the children design pattern

chore: convert app to use React.lazy

chore: fix ts errors

test: fix all broken tests from router changes

chore: revert adding `path` property and just append to routes with splat

chore: cleanup deps

chore(releases): convert to rrd@6

chore: fix broken test timeout with EditSettingsView

fix: warnings & add tests around deprecation messages

test(content-releases): fix mocking issue

test(content-manager): fix e2e tests

chore: minor tweaks

chore: rename screaming case to getter

chore: pr fixes & amends

e2e/app-template/package.json

@@ -17,7 +17,7 @@
     "better-sqlite3": "9.0.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-router-dom": "5.3.4",
+    "react-router-dom": "6.21.1",
     "styled-components": "5.3.3"
   },
   "engines": {

e2e/tests/admin/signup.spec.js

@@ -96,7 +96,7 @@ test.describe('Sign Up', () => {
   }) => {
     await page.getByRole('button', { name: "Let's start" }).click();
 
-    await page.waitForURL('**/admin/');
+    await page.waitForURL('**/admin');
     await expect(page).toHaveTitle('Homepage');
   });
 });

examples/getstarted/package.json

@@ -32,7 +32,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-intl": "6.4.1",
-    "react-router-dom": "5.3.4",
+    "react-router-dom": "6.21.1",
     "strapi-plugin-workspace-plugin": "workspace:*",
     "styled-components": "5.3.3"
   },

examples/getstarted/src/plugins/local-plugin/admin/src/index.js

@@ -8,17 +8,13 @@ const name = pluginPkg.strapi.name;
 export default {
   register(app) {
     app.addMenuLink({
-      to: `/plugins/${pluginId}`,
+      to: `plugins/${pluginId}`,
       icon: PluginIcon,
       intlLabel: {
         id: `${pluginId}.plugin.name`,
         defaultMessage: 'My plugin',
       },
-      Component: async () => {
-        const component = await import('./pages/App');
-
-        return component;
-      },
+      Component: () => import('./pages/App'),
       permissions: [],
     });
 

examples/kitchensink-ts/package.json

@@ -20,7 +20,7 @@
     "better-sqlite3": "9.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "5.3.4",
+    "react-router-dom": "6.21.1",
     "styled-components": "5.3.3"
   },
   "engines": {

examples/kitchensink/package.json

@@ -24,7 +24,7 @@
     "pg": "8.11.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "5.3.4",
+    "react-router-dom": "6.21.1",
     "styled-components": "5.3.3"
   },
   "engines": {

package.json

@@ -97,7 +97,6 @@
     "@types/react": "18.2.39",
     "@types/react-dom": "18.2.17",
     "@types/react-helmet": "6.1.8",
-    "@types/react-router-dom": "^5.3.3",
     "@types/styled-components": "5.1.32",
     "@typescript-eslint/eslint-plugin": "6.7.3",
     "@typescript-eslint/parser": "6.7.3",

packages/admin-test-utils/src/global-setup.ts

@@ -1,7 +1,7 @@
 const globalSetup = async () => {
   process.env.TZ = 'UTC';
   process.env.LANG = 'en_US.UTF-8';
-  process.env.ADMIN_PATH = '/admin/';
+  process.env.ADMIN_PATH = '/admin';
 };
 
 export default globalSetup;

packages/core/admin/admin/src/App.tsx

@@ -9,36 +9,22 @@ import * as React from 'react';
 import { SkipToContent } from '@strapi/design-system';
 import {
   LoadingIndicatorPage,
-  MenuItem,
   TrackingProvider,
   useAppInfo,
   useNotification,
 } from '@strapi/helper-plugin';
 import merge from 'lodash/merge';
 import { useIntl } from 'react-intl';
 import { useDispatch } from 'react-redux';
-import { Route, Switch } from 'react-router-dom';
+import { Outlet } from 'react-router-dom';
 
-import { PrivateRoute } from './components/PrivateRoute';
 import { ADMIN_PERMISSIONS_CE } from './constants';
 import { useAuth } from './features/Auth';
 import { ConfigurationProvider, ConfigurationProviderProps } from './features/Configuration';
 import { useEnterprise } from './hooks/useEnterprise';
-import { AuthPage } from './pages/Auth/AuthPage';
-import { NotFoundPage } from './pages/NotFoundPage';
-import { UseCasePage } from './pages/UseCasePage';
 import { setAdminPermissions } from './reducer';
 import { useInitQuery, useTelemetryPropertiesQuery } from './services/admin';
 import { PermissionMap } from './types/permissions';
-import { createRoute } from './utils/createRoute';
-
-type StrapiRoute = Pick<MenuItem, 'exact' | 'to'> & Required<Pick<MenuItem, 'Component'>>;
-
-const ROUTES_CE: StrapiRoute[] | null = null;
-
-const AuthenticatedApp = React.lazy(() =>
-  import('./components/AuthenticatedApp').then((mod) => ({ default: mod.AuthenticatedApp }))
-);
 
 interface AppProps extends Omit<ConfigurationProviderProps, 'children' | 'authLogo' | 'menuLogo'> {
   authLogo: string;
@@ -59,38 +45,19 @@ export const App = ({ authLogo, menuLogo, showReleaseNotification, showTutorials
       defaultValue: ADMIN_PERMISSIONS_CE,
     }
   );
-  const routes = useEnterprise(
-    ROUTES_CE,
-    async () => (await import('../../ee/admin/src/constants')).ROUTES_EE,
-    {
-      defaultValue: [],
-    }
-  );
+
   const toggleNotification = useNotification();
   const { formatMessage } = useIntl();
   const dispatch = useDispatch();
   const appInfo = useAppInfo();
   const token = useAuth('App', (state) => state.token);
 
-  const authRoutes = React.useMemo(() => {
-    if (!routes) {
-      return null;
-    }
-
-    return routes.map(({ to, Component, exact }) => createRoute(Component, to, exact));
-  }, [routes]);
-
   React.useEffect(() => {
     dispatch(setAdminPermissions(adminPermissions));
   }, [adminPermissions, dispatch]);
 
   const initQuery = useInitQuery();
-  const {
-    hasAdmin,
-    uuid,
-    authLogo: customAuthLogo,
-    menuLogo: customMenuLogo,
-  } = initQuery.data ?? {};
+  const { uuid, authLogo: customAuthLogo, menuLogo: customMenuLogo } = initQuery.data ?? {};
 
   const telemetryPropertiesQuery = useTelemetryPropertiesQuery(undefined, {
     skip: !uuid || !token,
@@ -163,21 +130,7 @@ export const App = ({ authLogo, menuLogo, showReleaseNotification, showTutorials
         showTutorials={showTutorials}
       >
         <TrackingProvider value={trackingInfo}>
-          <Switch>
-            {authRoutes}
-            <Route
-              path="/auth/:authType"
-              render={(routerProps) => <AuthPage {...routerProps} hasAdmin={Boolean(hasAdmin)} />}
-              exact
-            />
-            <PrivateRoute path="/usecase">
-              <UseCasePage />
-            </PrivateRoute>
-            <PrivateRoute path="/">
-              <AuthenticatedApp />
-            </PrivateRoute>
-            <Route path="" component={NotFoundPage} />
-          </Switch>
+          <Outlet />
         </TrackingProvider>
       </ConfigurationProvider>
     </React.Suspense>