react 路由设置懒加载 ts版

最新推荐文章于 2024-08-04 13:48:15 发布

Zeng_Z_H

最新推荐文章于 2024-08-04 13:48:15 发布

阅读量908

点赞数

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/Zeng_Z_H/article/details/123087214

版权

本文介绍如何使用React.lazy和React.Suspense组件来优化路由加载性能，通过改变组件导入方式并包裹Switch，实现在用户导航到非首屏页面时按需加载Login和Layout组件，提升用户体验。

摘要由CSDN通过智能技术生成

1. 组件导入方式，改为React.lazy(() => import ('xxx'))

2. React.Suspense组件负责懒加载，

🔔包住Switch组件

🔔设置fallback属性

import { BrowserRouter as Router, Redirect, Route, Switch } from 'react-router-dom'
// import Login from '@/pages/Login'
// import Layout from '@/pages/Layout'
{/* 1. */}
const Login = React.lazy(() => import('@/pages/Login'))
const Layout = React.lazy(() => import('@/pages/Layout'))


export default function App() {
  return (
    <Router>
      {/* 2. */}
      <React.Suspense fallback={<div>...加载中...</div>}>

        <Switch>
          <Redirect from='/' exact to='/layout'></Redirect>
          <Route path='/login' component={Login} />
          <Route path='/layout' component={Layout} />
        </Switch>
      {/* 2. */}
      </React.Suspense>
    </Router>

  )
}