react lazy 和 router 的使用

react-app 可以按需加载组件了，这里记录一下跟router配合使用。

import React, { Suspense, lazy } from 'react';
import { Route, Switch } from 'react-router-dom';

const RouterList = [
  { component: lazy(()=>import('组件路径')), pathname: '/' }
];

export default () => {
  return (
    <div className={'app'}>
      <Suspense fallback={<div>loading</div>}>  // fallback 可接受一个组件，可为 null
        <Switch>
          {
            RouterList.map((s, i) => {
              let PageModule = s.component;  // 给匿名组件取个名字，便于下面用
              return <Route key={'router' + i}
                path={s.pathname}
                exact
                render={(props) => <PageModule {...props} />}  // 这里用 render
              />
            })
          }
        </Switch>
      </Suspense>
    </div>
  );
};