react#lazy TypeScript Examples

Router = () => {
  return (
    <Suspense fallback={null}>
      <Styles />
      <Header />
      <Switch>
        {routes.map((routeItem) => {
          return (
            <Route
              key={routeItem.component}
              path={routeItem.path}
              exact={routeItem.exact}
              component={lazy(() => import(`../pages/${routeItem.component}`))}
            />
          );
        })}
      </Switch>
      <Footer />
    </Suspense>
  );
}

Component: React.FC<RootRouteProps> = ({ result }) => {
  const history = useNavigate()
  const location = useLocation()

  useMount(() => {
    console.log(result)
    const resource = result[0].data.resource
    localStorage.setItem('__PASSPORT', resource.passport)
    if (resource.uid > 0) {
      message.success(`已经登录，UID为${resource.uid}`)
      if (location.pathname.startsWith('/passport')) {
        history('/')
      }
    } else {
      message.error('没有登录')
      history('/passport')
    }
  })

  return (
    <Routes>
      <Route path="/passport" element={<Passport />}>
        <Route path="" element={<Page_passport />}></Route>
      </Route>
      <Route path="/dashboard" element={<Home />}>
        <Route path="" element={withLoading(lazy(() => import('~/pages/dashboard')))}></Route>
      </Route>
      <Route path="/read" element={<ReadLayout />}></Route>
      <Route path="/creation" element={<CreationLayout />}></Route>
      <Route path="*" element={<Navigate to="/dashboard" replace />}></Route>
    </Routes>
  )
}

MiniDashboard: React.FC = (props) => {
  // rootFontsize当成配合windowResize更新时组件做页面更新的key值，暂无实质用途
  const rootFontsize =
    useSelector((state: RootState) => state.controller.bestFont) || 16;
  // Memo缓存组件防止反复刷新
  // eslint-disable-next-line react-hooks/exhaustive-deps
  const LazyComponent = useMemo(
    () => lazy(() => import('~/components/MiniDashboard/Dashboard/index')),
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [rootFontsize],
  );
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <LazyComponent {...props} />
    </Suspense>
  );
}

Login = lazy(() => import("./components/Login"))

TagPage = lazy(() => import('../pages/tag/Tag'))

SwaggerToolboxPage = lazy(() => import('../pages/SwaggerToolboxPage'))

ThemeEditPage = lazy(() => import('../pages/themeEdit/ThemeEdit'))

Component: React.FC<RootRouteProps> = ({ result }) => {
  const history = useNavigate()
  const location = useLocation()

  useMount(() => {
    console.log(result)
    const resource = result[0].data.resource
    localStorage.setItem('__PASSPORT', resource.passport)
    if (resource.uid > 0) {
      message.success(`已经登录，UID为${resource.uid}`)
      if (location.pathname.startsWith('/passport')) {
        history('/')
      }
    } else {
      message.error('没有登录')
      history('/passport')
    }
  })

  return (
    <Routes>
      <Route path="/passport" element={<Passport />}>
        <Route path="" element={<Page_passport />}></Route>
      </Route>
      <Route path="/transform" element={<Transform />}></Route>
      <Route path="/dashboard" element={<Home />}>
        <Route path="" element={withLoading(lazy(() => import('~/pages/dashboard')))}></Route>
      </Route>
      <Route path="/users" element={<Home />}>
        <Route path="" element={withLoading(lazy(() => import('~/pages/users')))}></Route>
      </Route>
      <Route path="/temp/*" element={<Home />}>
        <Route
          path="temp_trade_20220108"
          element={withLoading(lazy(() => import('~/pages/temp/temp_trade_20220108')))}
        ></Route>
      </Route>
      <Route path="/permission/*" element={<Home />}>
        <Route
          path="role"
          element={withLoading(lazy(() => import('~/pages/permission/role')))}
        ></Route>
        <Route
          path="access"
          element={withLoading(lazy(() => import('~/pages/permission/access')))}
        ></Route>
        <Route
          path="policy"
          element={withLoading(lazy(() => import('~/pages/permission/policy')))}
        ></Route>
      </Route>
      <Route path="*" element={<Navigate to="/dashboard" replace />}></Route>
    </Routes>
  )
}

MyPage = lazy(() => import('./pages/MyPage/MyPage'))

Standard = lazy(()=>import('./containers/Standard/'/* webpackChunkName:"Standard" */))

AuthCallback = lazy(() => import('../pages/AuthCallback'))

Homepage = lazy(() => import('./components/Homepage/Homepage'))

PasswordStrength = lazy(() => import('../../lib/components/PasswordStrength'))

DragonPage = lazy(() => import('./pages/DragonPage'))

SignUp = lazy(() => import("./components/SignUp"))

Main = lazy(() => import('../pages/Main'))

RemoveLiquidity = lazy(() => import('./views/RemoveLiquidity'))

WeaponEditor = lazy(() => import('./WeaponEditor'))

Create = lazy(() => import('../Create'))

Page404 = lazy(() => import("./pages/Error/404"))

SignupWorkflows = lazy(() => import("./components/SignupWorkflows"))

TagListPage = lazy(() => import('../pages/tagList/TagList'))

UserSettings = lazy(() => import("./components/UserSettings"))

ReactLazy = lazy(
  () => import(/* webpackChunkName: "async-react-lazy" */ './ui/react-lazy')
)

RealLogViewer = lazy(() =>
  import('./RealLogViewer').then(m => ({ default: m.RealLogViewer })),
)

LayoutHandler = lazy(() => import('../containers/LayoutHandler'))

Main = lazy(() => import('../pages/Main'))

LazySettings = lazy(() => import("./pages/Settings"))

PictureDialog = lazy(() => import('./PictureDialog'))