React + react-router + react-redux前端架构

首先安装creact-react-app

npm i create-react-app -g

创建APP

create-react-app my-app

cd my-app

先执行 npm run eject生成webpack配置文件

Router安装

npm i react-router -s （npm i react-router@3.2.1 -s）

react-router4.0

提供了Router,Route组件

import {Router,Route} from 'react-router';

import createHashHistory from "history/createHashHistory";

    <Router history={history}>

        <Route path="/" component={App}></Route>

    </Router>

路由嵌套 router4.0嵌套路由写在对应父组件内部

react-router3.0

import {Router,useRouterHistory} from 'react-router';
import {syncHistoryWithStore} from 'react-router-redux';
import {createHashHistory} from "history";
import routes from './containers/routerRegister';

import store from './store';

const routeHistory = useRouterHistory(createHashHistory)()；
const history = syncHistoryWithStore(routeHistory, store);

const rootRoute = {
    path:'/',
    component: App,
    childRoutes: routes
};

<Provider store={store}>
    <Router history={history} routes={rootRoute}></Router>
</Provider>

对应的子路由childRoutes

import homeRouter from './Home/router';
import userRouter from './User/router';

const routes = []
	.concat(homeRouter)
	.concat(userRouter);

export default routes;

对应的子路由（如果要实现按需加载需要通过module.export导出一个模块，在routerRegister中使用require（）的方式引入对应模块，在webpack中需要修改配置项，此处需要自己百度一波）

import Home from './index';

const routes = [
	{
    	path: 'home',
    	component: Home,
    	// getComponent(nextState, cb) {
    	//     require.ensure([], (require) => {
        //         cb(null, require('./EastPrescribe'))
        //     })
        //