react动态路由、异步组件

一、动态路由

列表组件

路由配置

详情组件获取 id

this.props.match.params.id

 二、异步组件 react-loadable

npm install react-loadable

详情组件实现异步加载

在detail文件夹下新建loadable.js文件

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

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

export default () => 

app.js引入方法变成detail文件夹下的loadable.js返回的异步组件

import Detail from './pages/detail/loadable.js';

这时，detail文件下的index.js获取id时，则会报错，因为我们此时detail路径匹配的是loadable.js返回的异步组件

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

componentDidMount() {
    this.props.getDetail(this.props.match.params.id);
}

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