feat: prepare for react-router 6, lazy load routes (#980)

Author: ValeraS

src/containers/App/Content.tsx

@@ -13,18 +13,11 @@ import {getUser} from '../../store/reducers/authentication/authentication';
 import {nodesListApi} from '../../store/reducers/nodesList';
 import {cn} from '../../utils/cn';
 import {useTypedDispatch, useTypedSelector} from '../../utils/hooks';
+import {lazyComponent} from '../../utils/lazyComponent';
 import Authentication from '../Authentication/Authentication';
-import Cluster from '../Cluster/Cluster';
 import {getClusterPath} from '../Cluster/utils';
-import {Clusters} from '../Clusters/Clusters';
 import Header from '../Header/Header';
 import type {RawBreadcrumbItem} from '../Header/breadcrumbs';
-import Node from '../Node/Node';
-import {PDiskPage} from '../PDiskPage/PDiskPage';
-import {Tablet} from '../Tablet';
-import {TabletsFilters} from '../TabletsFilters/TabletsFilters';
-import Tenant from '../Tenant/Tenant';
-import {VDiskPage} from '../VDiskPage/VDiskPage';
 
 import {
     ClusterSlot,
@@ -54,40 +47,45 @@ const routesSlots: RouteSlot[] = [
     {
         path: routes.cluster,
         slot: ClusterSlot,
-        component: Cluster,
+        component: lazyComponent(() => import('../Cluster/Cluster'), 'Cluster'),
     },
     {
         path: routes.tenant,
         slot: TenantSlot,
-        component: Tenant,
+        component: lazyComponent(() => import('../Tenant/Tenant'), 'Tenant'),
     },
     {
         path: routes.node,
         slot: NodeSlot,
-        component: Node,
+        component: lazyComponent(() => import('../Node/Node'), 'Node'),
     },
     {
         path: routes.pDisk,
         slot: PDiskPageSlot,
-        component: PDiskPage,
+        component: lazyComponent(() => import('../PDiskPage/PDiskPage'), 'PDiskPage'),
     },
     {
         path: routes.vDisk,
         slot: VDiskPageSlot,
-        component: VDiskPage,
+        component: lazyComponent(() => import('../VDiskPage/VDiskPage'), 'VDiskPage'),
     },
     {
         path: routes.tablet,
         slot: TabletSlot,
-        component: Tablet,
+        component: lazyComponent(() => import('../Tablet'), 'Tablet'),
     },
     {
         path: routes.tabletsFilters,
         slot: TabletsFiltersSlot,
-        component: TabletsFilters,
+        component: lazyComponent(
+            () => import('../TabletsFilters/TabletsFilters'),
+            'TabletsFilters',
+        ),
     },
 ];
 
+const Clusters = lazyComponent(() => import('../Clusters/Clusters'), 'Clusters');
+
 function renderRouteSlot(slots: SlotMap, route: RouteSlot) {
     return (
         <Route
@@ -151,7 +149,12 @@ export function Content(props: ContentProps) {
                     {routesSlots.map((route) => {
                         return renderRouteSlot(slots, route);
                     })}
-                    <Redirect {...redirectProps} />
+                    <Route
+                        path={redirectProps.from || redirectProps.path}
+                        exact={redirectProps.exact}
+                        strict={redirectProps.strict}
+                        render={() => <Redirect to={redirectProps.to} push={redirectProps.push} />}
+                    />
                 </Switch>
             </Route>
         </Switch>

src/containers/App/Providers.tsx

@@ -5,7 +5,7 @@ import type {Store} from '@reduxjs/toolkit';
 import type {History} from 'history';
 import {HelmetProvider} from 'react-helmet-async';
 import {Provider} from 'react-redux';
-import {Router} from 'react-router';
+import {Router} from 'react-router-dom';
 import {QueryParamProvider} from 'use-query-params';
 import {ReactRouter5Adapter} from 'use-query-params/adapters/react-router-5';
 

src/containers/App/appSlots.tsx

@@ -1,13 +1,13 @@
-import type {RedirectProps, RouteComponentProps} from 'react-router';
+import type {RedirectProps, RouteComponentProps} from 'react-router-dom';
 
 import {createSlot} from '../../components/slots';
-import type Cluster from '../Cluster/Cluster';
+import type {Cluster} from '../Cluster/Cluster';
 import type {Clusters} from '../Clusters/Clusters';
-import type Node from '../Node/Node';
+import type {Node} from '../Node/Node';
 import type {PDiskPage} from '../PDiskPage/PDiskPage';
 import type {Tablet} from '../Tablet';
 import type {TabletsFilters} from '../TabletsFilters/TabletsFilters';
-import type Tenant from '../Tenant/Tenant';
+import type {Tenant} from '../Tenant/Tenant';
 import type {VDiskPage} from '../VDiskPage/VDiskPage';
 
 export const ClustersSlot = createSlot<{

src/containers/AppWithClusters/ExtendedCluster/ExtendedCluster.tsx

@@ -13,7 +13,7 @@ import {cn} from '../../../utils/cn';
 import type {GetMonitoringClusterLink, GetMonitoringLink} from '../../../utils/monitoring';
 import {getCleanBalancerValue, removeViewerPathname} from '../../../utils/parseBalancer';
 import {getBackendFromNodeHost} from '../../../utils/prepareBackend';
-import type Cluster from '../../Cluster/Cluster';
+import type {Cluster} from '../../Cluster/Cluster';
 import {useClusterData} from '../useClusterData';
 
 import './ExtendedCluster.scss';

src/containers/AppWithClusters/ExtendedNode/ExtendedNode.tsx

@@ -1,4 +1,4 @@
-import type Node from '../../Node/Node';
+import type {Node} from '../../Node/Node';
 import {useClusterData} from '../useClusterData';
 
 export function ExtendedNode({component: NodeComponent}: {component: typeof Node}) {

src/containers/AppWithClusters/ExtendedTenant/ExtendedTenant.tsx

@@ -1,7 +1,7 @@
 import {MonitoringButton} from '../../../components/MonitoringButton/MonitoringButton';
 import type {ETenantType} from '../../../types/api/tenant';
 import type {GetMonitoringLink} from '../../../utils/monitoring';
-import type Tenant from '../../Tenant/Tenant';
+import type {Tenant} from '../../Tenant/Tenant';
 import {useClusterData} from '../useClusterData';
 
 export interface ExtendedTenantProps {

src/containers/AppWithClusters/useClusterData.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {useLocation} from 'react-router';
+import {useLocation} from 'react-router-dom';
 
 import {parseQuery} from '../../routes';
 import {clustersApi} from '../../store/reducers/clusters/clusters';

src/containers/AsideNavigation/YdbInternalUser/YdbInternalUser.tsx

@@ -1,6 +1,6 @@
 import {ArrowRightFromSquare, ArrowRightToSquare} from '@gravity-ui/icons';
 import {Button, Icon} from '@gravity-ui/uikit';
-import {useHistory} from 'react-router';
+import {useHistory} from 'react-router-dom';
 
 import routes, {createHref} from '../../../routes';
 import {logout} from '../../../store/reducers/authentication/authentication';

src/containers/Authentication/Authentication.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import {Eye, EyeSlash, Xmark} from '@gravity-ui/icons';
 import {Button, Link as ExternalLink, Icon, TextInput} from '@gravity-ui/uikit';
-import {useHistory, useLocation} from 'react-router';
+import {useHistory, useLocation} from 'react-router-dom';
 
 import {parseQuery} from '../../routes';
 import {authenticate} from '../../store/reducers/authentication/authentication';

src/containers/Cluster/Cluster.tsx

@@ -41,7 +41,7 @@ interface ClusterProps {
     additionalVersionsProps?: AdditionalVersionsProps;
 }
 
-function Cluster({
+export function Cluster({
     additionalClusterProps,
     additionalTenantsProps,
     additionalNodesProps,
@@ -198,7 +198,11 @@ function Cluster({
                     >
                         <Versions versionToColor={versionToColor} />
                     </Route>
-                    <Redirect to={getLocationObjectFromHref(getClusterPath(activeTabId))} />
+                    <Route
+                        render={() => (
+                            <Redirect to={getLocationObjectFromHref(getClusterPath(activeTabId))} />
+                        )}
+                    />
                 </Switch>
             </div>
         </div>
@@ -228,5 +232,3 @@ function useClusterTab() {
 
     return activeTab;
 }
-
-export default Cluster;