(七)学习笔记--异步组件+withRouter使用

1.下载

https://github.com/jamiebuilds/react-loadable

yarn add react-loadable

2.在所需异步组件的文件夹下创建loadable.js

 

3.编写loadable.js

import React from 'react'
import Loadable from 'react-loadable';

const LoadableComponent = Loadable({
    loader: () => import('./center.jsx'),
    loading() {
        return (<div>正在加载中...</div>)
    }
});

export default () => <LoadableComponent />

 4.路由设置

import Center from "./account/loadable.js";

class App extends React.Component {
    render() {
        return (
            <Provider store={store}>
                <Router>
                    <Switch>
                        <Route path="/account/center" exact component={Center}></Route>
                    </Switch>
                </Router>
            </Provider>
        );
    }
}

export default App;

5.动态路由获取数据需加withRouter

如App.js下的<Route path='/detail/:id' exact component={Detail}></Route>

需要通过this.props.match.params.id 在detail.jsx中获取 id

 

在详情detail.jsx组件中:

1)import { withRouter } from 'react-router-dom';

2)export default connect(mapState, mapDispatch)(withRouter(Detail));