react动态路由、异步组件

一、动态路由

列表组件

<Link key={index} to={'/detail/' + item.get('id')}></Link>			

路由配置

<Route path='/detail/:id' exact component={Detail}></Route>

详情组件获取 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 <div>正在加载</div>
  }
});

export default () => <LoadableComponent/>

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

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