cangku/frontend/src/router/index.jsx

import React, { lazy, Suspense } from 'react';
import { createBrowserRouter, Navigate } from 'react-router-dom';
import BasicLayout from '../layouts/BasicLayout';
import { AuthPageLoadingFallback, PageLoadingFallback } from '../components/AppLoadingSkeleton';

const Login = lazy(() => import('../pages/Login'));
const Install = lazy(() => import('../pages/Install'));
const Setup = lazy(() => import('../pages/Setup'));
const Settings = lazy(() => import('../pages/Settings'));
const OnlineDesktopUsers = lazy(() => import('../pages/OnlineDesktopUsers'));
const DesktopExecutionTasks = lazy(() => import('../pages/DesktopExecutionTasks'));
const MarketingEvents = lazy(() => import('../pages/MarketingEvents'));
const ProductInformation = lazy(() => import('../pages/ProductInformation'));
const PromotionModule = lazy(() => import('../pages/PromotionModule'));
const OperationPlaceholder = lazy(() => import('../pages/OperationPlaceholder'));
const DevelopmentStylePreview = lazy(() => import('../pages/DevelopmentStylePreview'));
const ProductAnalysis = lazy(() => import('../pages/ProductAnalysis'));
const OpsBIncentiveBoard = lazy(() => import('../pages/PlanningUpload/OpsBIncentiveBoard'));
const ProductMonitoring = lazy(() => import('../pages/ProductMonitoring'));
const ModularStockMonitor = lazy(() => import('../pages/ModularStockMonitor'));
const MkhBomData = lazy(() => import('../pages/MkhBomData'));
const LargeStockMonitor = lazy(() => import('../pages/LargeStockMonitor'));

const lazyLoadingElement = <PageLoadingFallback />;

const renderLazyComponent = (lazyView, props = {}, fallback = lazyLoadingElement) => {
  const LazyView = lazyView;

  return (
    <Suspense fallback={fallback}>
      <LazyView {...props} />
    </Suspense>
  );
};

const HOME_URL = '/planning/dev-style-preview';

const router = createBrowserRouter([
  {
    path: '/login',
    element: renderLazyComponent(Login, {}, <AuthPageLoadingFallback />),
  },
  {
    path: '/callback',
    element: renderLazyComponent(Login, {}, <AuthPageLoadingFallback />),
  },
  {
    path: '/setup',
    element: renderLazyComponent(Setup),
  },
  {
    path: '/install',
    element: renderLazyComponent(Install),
  },
  {
    path: '/',
    element: <BasicLayout />,
    children: [
      {
        index: true,
        element: <Navigate to={HOME_URL} replace />,
      },
      {
        path: 'dashboard',
        element: <Navigate to={HOME_URL} replace />,
      },
      {
        path: 'channel',
        element: <Navigate to={HOME_URL} replace />,
      },
      {
        path: 'planning',
        element: <Navigate to={HOME_URL} replace />,
      },
      {
        path: 'planning/operation/marketing-events',
        element: <Navigate to="/planning/operation/marketing-events/activity-products" replace />,
      },
      {
        path: 'planning/operation/marketing-events/activity-products',
        element: renderLazyComponent(MarketingEvents),
      },
      {
        path: 'planning/operation/marketing-tools',
        element: <Navigate to="/planning/operation/marketing-events" replace />,
      },
      {
        path: 'planning/operation/product-information',
        element: renderLazyComponent(ProductInformation),
      },
      {
        path: 'planning/operation/product-analysis',
        element: renderLazyComponent(ProductAnalysis),
      },
      {
        path: 'planning/operation/promotion-module',
        element: renderLazyComponent(PromotionModule),
      },
      {
        path: 'planning/operation/ops-b-incentive',
        element: renderLazyComponent(OpsBIncentiveBoard),
      },
      {
        path: 'planning/operation/product-monitoring',
        element: renderLazyComponent(ProductMonitoring),
      },
      {
        path: 'planning/operation/modular-stock-monitor',
        element: renderLazyComponent(ModularStockMonitor),
      },
      {
        path: 'planning/operation/mkh-bom-data',
        element: renderLazyComponent(MkhBomData),
      },
      { path: 'planning/operation/store-checkup', element: <Navigate to={HOME_URL} replace /> },
      { path: 'planning/operation/review-analysis', element: <Navigate to={HOME_URL} replace /> },
      { path: 'planning/operation/customer-service-checkup', element: <Navigate to={HOME_URL} replace /> },
      { path: 'planning/operation/pricing-calculator', element: <Navigate to={HOME_URL} replace /> },
      { path: 'planning/operation/desktop-client-download', element: <Navigate to={HOME_URL} replace /> },
      { path: 'planning/operation/ai-buyer-show', element: <Navigate to={HOME_URL} replace /> },
      { path: 'planning/operation/ai-seeding-video', element: <Navigate to={HOME_URL} replace /> },
      { path: 'settings/desktop-client-releases', element: <Navigate to={HOME_URL} replace /> },
      {
        path: 'planning/operation/:featureKey',
        element: renderLazyComponent(OperationPlaceholder),
      },
      {
        path: 'planning/upload',
        element: <Navigate to={HOME_URL} replace />,
      },
      {
        path: 'planning/dev-style-preview',
        element: renderLazyComponent(DevelopmentStylePreview),
      },
      {
        path: 'planning/large-stock-monitor/:warehouseSlug',
        element: renderLazyComponent(LargeStockMonitor),
      },
      {
        path: 'settings',
        element: renderLazyComponent(Settings),
      },
      {
        path: 'settings/online-desktop-users',
        element: renderLazyComponent(OnlineDesktopUsers),
      },
      {
        path: 'settings/desktop-execution-tasks',
        element: renderLazyComponent(DesktopExecutionTasks),
      },
      {
        path: '*',
        element: <Navigate to={HOME_URL} replace />,
      },
    ],
  },
]);

export default router;