Fragment 占位组件不生成标签与路由组件lazyLoad案例

目录

• 使用
• 作用
• 案例
• 路由组件的lazyLoad
• 案例

使用

Fragment表示占位组件 并不会生成一个标签 帮助解决了报错问题 其他什么都不会生成

<>

两者的区别是 Fragment 能接收参数 key 可用于循环遍历 <> 内不能包含任何参数

作用

可以不用必须有一个真实的DOM根标签了

案例

import React, {
    Component, Fragment
} from 'react';
// Fragment表示占位组件 并不会生成一个标签 帮助解决了报错问题 其他什么都不会生成
class Text extends Component {
    render() {
        return (
            
                
                

                    
Learn More
                    
Learn React
                
            
        );
    }
}
export default Text;

路由组件的lazyLoad

//1.通过React的lazy函数配合import()函数动态加载路由组件 ===> 路由组件代码会被分开打包
const Login = lazy(()=>import('@/pages/Login'))
//2.通过指定在加载得到路由打包文件前显示一个自定义loading界面
loading.....}>
       
           
           
       
   

案例

import React, { Component,lazy,Suspense } from 'react'
import { NavLink,Route } from 'react-router-dom'
// import Home from './Home'
// import About from './About'
import Loading from './Loading'
const About = lazy(() => import("./About"))
const Home = lazy(() => import("./Home"))
export default class Demo extends Component {
  render() {
    return (
      

        

        
        

          

            

              About
              Home
            
          
          

            

              

                }>
                    {/* 注册路由 */}
                  
                  
                
              
            
          
          
      
    )
  }
}

以上就是Fragment 占位组件不生成标签与路由组件lazyLoad案例的详细内容，更多关于Fragment 占位组件的资料请关注脚本之家其它相关文章！