准备
安装React
npm install -g create-react-app
创建项目 脚手架
create-react-app demo
安装路由 react-router
npm install --save react-router-dom
安装 redux react-redux redux-thunk
npm install --save redux react-redux redux-thunk
react-router 的配置
import React, { Component } from 'react';
import { HashRouter, Switch, Route, Redirect } from 'react-router-dom';
import asyncComponent from '../utils/asyncComponent'; // 实现按需引入 下面会写到
// import Home from '../views/home/index'
const Home = asyncComponent(() => import("../pages/home/index"));
class RouteConfig extends Component{
render() {
return (
<HashRouter>
<Switch>
<Route path="/" exact component={Home} />
<Redirect to="/" />
</Switch>
</HashRouter>
);
}
}
export default RouteConfig;
react-router 实现按需引入的方法
新建一个 asyncComponent.jsx 文件
// asyncComponent.jsx
import React, { Component } from "react";
export default function asyncComponent(importComponent) {
class AsyncComponent extends Component {
constructor(props) {
super(props);
this.state = {
component: null
};
}
async componentDidMount() {
const { default: component } = await importComponent();
this.setState({component});
}
render() {
const C = this.state.component;
return C ? <C {...this.props} /> : null;
}
}
return AsyncComponent;
}
在入口文件
import React from 'react';
import ReactDOM from 'react-dom';
import Route from './router';
const render = Component => {
ReactDOM.render(
<React.StrictMode>
<Component />
</React.StrictMode>,
document.getElementById('root')
)
}
render(Route);