react中异步组件以及withRouter的使用
什么是异步组件?简单来说就是异步加载一个组件,正常情况浏览器加载的是我们打包好的bundle.js文件,那么这个文件是集合了所有js是代码,然而我们首屏加载并不需要一次性加载所有的组件,这会造成性能的损耗,所以我们可以使用异步组件,推荐使用(react-loadable)https://github.com/jamiebuilds/react-loadable,那么使用react-loadable就会造成路由跳转的问题,所以我们需要使用withRouter来解决,withRouter组件的功能是让当前组件有能力获取到所有的参数和内容
//首先要下载yarn add react-loadable
//loadable.js文件
import React from 'react';
import Loadable from 'react-loadable'; const LoadableComponent = Loadable({
loader: () => import('./'), //./需要异步的组件
loading(){
return <div>正在加载</div>
//可以加载一些好看的loading
}
}); export default () => <LoadableComponent/>;
//index.js文件
import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';
import { connect } from 'react-redux'; class Detail extends Component{
render(){
console.log(this.props.match.params.id); //这时候就可以获取到了,页面也不会报错了
return(<div></div>);
}
}
export default connect(mapState, mapDispatch)(withRouter(Detail)); //路由部分
import React, { Component } from 'react';
import { BrowserRouter, Route } from 'react-router-dom';
import { Provider } from 'react-redux';
import store from './store';
import Detail from './pages/detail/loadable.js';
class App extends Component{
render(){
return(
<Provider store={store}>
<BrowserRouter>
<div>
<Route path='/detail/:id' exact component={Detail}></Route>
</div>
</BrowserRouter>
</Provider>
);
}
}
react中异步组件以及withRouter的使用的更多相关文章
- React中父子组件数据传递
Vue.js中父子组件数据传递:Props Down , Events Up Angular中父子组件数据传递:Props Down, Events Up React中父子组件数据传递:Prop ...
- React中父组件与子组件之间的数据传递和标准化的思考
React中父组件与子组件之间的数据传递的的实现大家都可以轻易做到,但对比很多人的实现方法,总是会有或多或少的差异.在一个团队中,这种实现的差异体现了每个人各自的理解的不同,但是反过来思考,一个团队用 ...
- React中父子组件间的通信问题
1.https://blog.csdn.net/sinat_17775997/article/details/59103173 (React中父子组件间的通信问题)
- 九、React中的组件、父子组件、React props父组件给子组件传值、子组件给父组件传值、父组件中通过refs获取子组件属性和方法
一.概述 React中的组件: 解决html 标签构建应用的不足. 使用组件的好处:把公共的功能单独抽离成一个文件作为一个组件,哪里里使用哪里引入. [父子组件]:组件的相互调用中,我们把调用者称为父 ...
- Vue中异步组件(结合webpack,转载)
转载,原文出处:https://www.jianshu.com/p/40a364b5e964 1.什么是异步组件? 异步组件就是定义的时候什么都不做,只在组件需要渲染(组件第一次显示)的时候进行加载渲 ...
- 什么是React中的组件
组件就是页面上的一部分.如图,左边是一个网页.右边是对应的一个组件图.我们可以把一个大的网页拆分成很多小的部分.比如标题部分,对应一个组件,就是标题组件.搜索部分,对应的组件就是搜索组件.而这个搜索组 ...
- React中父子组件传值
一.首先我们先来看父组件向子组件传值 1.1 我们要明白父组件 --> 子组件 是通过props这个属性来传值的 我们来看父组件的代码 import React from 'react'; im ...
- react中父组件给子组件传值
子组件 state = { msg: 'a' } render(){ return<h1>{this.state.msg}</h1> } setInfo = (val)=> ...
- react中父组件调用子组件的方法
1.直接使用ref进行获取 import React, {Component} from 'react'; export default class Parent extends Component ...
随机推荐
- 【C/C++】旋转数组的最小数字/ 剑指offer
#include <bits/stdc++.h> using namespace std; class Solution { public: int minNumberInRotateAr ...
- 用graphviz可视化决策树
1.安装graphviz. graphviz本身是一个绘图工具软件,下载地址在:http://www.graphviz.org/.如果你是linux,可以用apt-get或者yum的方法安装.如果是w ...
- Java 多线程的一次整理
一天没有出过家门,实属无聊,没事瞎写写 1. 基本概念 1.1 多进程和多线程的概念 程序是由指令和数据组成,指令要运行,数据要加载,指令被 CPU 加载运行,数据被加载到内存,指令运行时可由 CPU ...
- Excel字符串函数公式大全
一.Excel字符串的操作 1.1.Excel根据字节截取对应字符串(注:一个中文汉字对应两个字节) =LEFTB(A3,7) 从左边开始截取7个字节 =RIGHTB(A10,10) 从右边开始截取 ...
- tableau绘制饼图
一.将类别拖拽至列,将销售额拖拽至行 二.点击右上角智能显示选择饼图 三.拖拽销售额至标记卡,右键快速表计算-合计百分比-细节处理最终结果如下图所示
- M语言中的引用(Power Query 之 M 语言)
名词 查询表 函数 行{}/列[] 单元格 表(Table) 列表(List) 记录(Record) 引用[查询表] =查询表表名 引用[应用的步骤] =步骤名 引用表中的[单元格](深化) =表{行 ...
- 使用proxy解决请求跨域问题
背景 在 react 项目里,前端请求接口时出现了跨域问题(类似图片中的提示) 这时最快捷的方法就是让后端同学设置请求允许跨域(如图配置响应头) 如果后端同学不配合,就需要靠我们自己来了! 实现 Re ...
- ts 遇到的问题
1. Property 'generatePdf' does not exist on type 'Element'. 问题:ts类型校验报错,使得编译失败 解决方法:将报错字段定义为any类型
- FastAPI 学习之路(六十)打造系统的日志输出
我们要搭建日志系统,我们使用loguru,挺不错的一个开源的日志系统.可以使用 pip install loguru 我们在common创建log.py使用方式也很简单 import os impor ...
- Windows10 c++获取网卡信息(ipv4,子网掩码,网关,mac地址)
关于 本文样式环境: win10 + vs2017 + c++11 1.说明 算是踩坑吧,先前一直认为一块网卡只能有一个IP. 今天发现结构体中,定义了相关结构: 一块网卡可以用多个IP. 2.连接库 ...