React 实现 动态加载组件

React 实现 动态加载组件

import { Button } from 'antd'
import React, { useState, lazy, Suspense } from 'react'

//这个地方动态加载组件
//const Item = lazy(() => import('./Module.jsx')) //错误
const [Item, setItem] = useState(null)//正确
setItem(lazy(() => import('./Module.jsx')))

export function Test() {
  const [showPreview, setShowPreview] = useState(false)
  return (
    <div>
      <Button onClick={() => setShowPreview(true)}>ShowPreview</Button>
      {showPreview && (
        <Suspense fallback={<></>}>
          <Item />
        </Suspense>
      )}
    </div>
  )
}

./Module.jsx

这里注意导出的方式为 export default

export default () =>{
  return (
    <>
      test
    </>
  )
}

路由懒加载：

//"./views/Filter/Filter"
export default ():JSX.Element=> <div>lazy</div>

const Filter = lazy(() => import("./views/Filter/Filter"));

<Route
        path="/filter"
        element={
          <Suspense fallback={<div>loading...</div>}>
            <Filter />
          </Suspense>
        }
      >
    <Route path="subOutlet" element={<div>sub other</div>}></Route>
</Route>