知识点：
- import * from '' 同步执行。
- import(相对路径) 异步执行，返回Promise对象 自动 code-splitting(代码分割)
// 安装react-loadable 插件
import React from 'react';
import { HashRouter, Route, Switch, Redirect } from 'react-router-dom';
import Loadable from 'react-loadable';
import App from './App.js';
import Admin from './admin';
import Nomatch from './pages/nomatch/404';
import Home from './pages/home';
// 按路由拆分代码
const MyLoadingComponent = ({ isLoading, error }) => {
if (isLoading) {
return '加载中...'
}
else if (error) {
return '页面出错了。。。';
}
else {
return null;
}
};
const BaseParts = Loadable({
loader: () => import('./pages/baseParts'),
loading: MyLoadingComponent
});
class Routers extends React.Component {
render() {
return (
<HashRouter>
<App>
<Switch>
<Route path="/" render={() =>
<Switch>
<Route path="/product/baseParts" component={BaseParts}></Route>
<Redirect to="/home" />
<Route component={Nomatch}></Route>
</Switch>
}></Route>
</Switch>
</App>
</HashRouter>
)
}
}
export default Routers;
