什么是异步组件?简单来说就是异步加载一个组件,正常情况浏览器加载的是我们打包好的bundle.js文件,那么这个文件是集合了所有js是代码,然而我们首屏加载并不需要一次性加载所有的组件,这会造成性能的损耗,所以我们可以使用异步组件,推荐使用(react-loadable)https://github.com/jamiebuilds/react-loadable,那么使用react-loadable就会造成路由跳转的问题,所以我们需要使用withRouter来解决,withRouter组件的功能是让当前组件有能力获取到所有的参数和内容

1 2 3 4 5 6 7 8 9 10 11 12 13 14
|
import React from 'react'; import Loadable from 'react-loadable';
const LoadableComponent = Loadable({ loader: () => import('./'), loading(){ return <div>正在加载</div> } });
export default () => <LoadableComponent/>;
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33
| 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> ); } }
|