react中异步组件以及withRouter的使用
发布时间:2020-12-15 20:32:45 所属栏目:百科 来源:网络整理
导读:什么是异步组件?简单来说就是异步加载一个组件,正常情况浏览器加载的是我们打包好的bundle.js文件,那么这个文件是集合了所有js是代码,然而我们首屏加载并不需要一次性加载所有的组件,这会造成性能的损耗,所以我们可以使用异步组件, 推荐使用(react-l
什么是异步组件?简单来说就是异步加载一个组件,正常情况浏览器加载的是我们打包好的bundle.js文件,那么这个文件是集合了所有js是代码,然而我们首屏加载并不需要一次性加载所有的组件,这会造成性能的损耗,所以我们可以使用异步组件,推荐使用(react-loadable)https://github.com/jamiebuilds/react-loadable,那么使用react-loadable就会造成路由跳转的问题,所以我们需要使用withRouter来解决,withRouter组件的功能是让当前组件有能力获取到所有的参数和内容 //首先要下载yarn add react-loadable import React from ‘react‘; import Loadable from ‘react-loadable‘; const LoadableComponent = Loadable({ loader: () => import(‘./‘),//./需要异步的组件 loading(){ return <div>正在加载</div> //可以加载一些好看的loading } }); export default () => <LoadableComponent/>; //loadable.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> ); } } (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
相关内容
- 使用 DataChart 实现 Dojo Chart 的自动更新
- mandriva 安装 drcom (1)
- JavaScript Ajax实现异步通信
- 监控工具:Oracle 12c Cluster Health Monitor 详解
- logback.xml常用配置详解<configuration> and <l
- 【Oracle 】截取字符函数:SUBSTR()与检索字符位置函数:IN
- flex Accordion
- c# – 如何以编程方式将事件处理程序添加到.NET按钮?
- Oracle数据库-primary key/foreign key和references关系
- ruby – 为Rails 3插件生成测试路由时出错?