开发者社区> 问答> 正文

如何在React中实现路由的懒加载和加载指示器?

如何在React中实现路由的懒加载和加载指示器?

展开
收起
迪哒迪滴喵 2024-08-13 18:17:28 34 0
1 条回答
写回答
取消 提交回答
  • 在React中,可以使用React.lazy()和组件来实现路由的懒加载和加载指示器。React.lazy()允许你动态地导入React组件,而组件则可以包裹懒加载的组件,并指定一个加载时的备选内容(如加载指示器)。在路由配置中,你可以这样使用它们:

    const LazyComponent = React.lazy(() => import('@/pages/LazyPage')); 
    
    // 在Route组件中使用 
    <Route 
    path="/lazy" 
    render={() => ( 
    <Suspense fallback={<LoadingPage />}> 
    <LazyComponent /> 
    </Suspense> 
    )} 
    />
    

    在这个例子中,当访问/lazy路径时,LazyComponent会被懒加载,并且在加载过程中会显示组件作为加载指示器。

    2024-08-13 21:01:45
    赞同 1 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
利用编译将 Vue 组件转成 React 组件 立即下载
React Native 全量化实践 立即下载
React在大型后台管理项目中的工程实践 立即下载