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>
        );
    }
}