React（五）create-react-app 脚手架配置多页面应用

    单页面的应用是目前前端应用的主流方向，react、vue等前端框架在单页面应用上都相对比较适用。但是多页面应用在项目的也必不可少，企业的门户网站因需要百度推广，更加适合用多页面应用来开发。本文将介绍运用create-react-app脚手架来搭建一个简单实用的多页面项目框架。

  1.初始化项目

    创建create-react-app脚手架这边不过多叙述，react开发人员应该都会构建，构建成功后执行以下命令初始化webpack配置；

yarn eject 或者 npm run eject

执行完毕后项目的根目录会自动创建config文件夹，里面的文件即初始化的webpack配置文件。

   2.整理src目录文件

•     删除src文件夹内多余的文件

   只需要保留index.js和App.jsx文件，在打包时可能用到pwa的serviceWorker，因而也保留ServiceWorker.,js文件，删除其他多余文件。

•    新建pages文件夹，用于存放多页面的各个页面应用

   pages文件夹内的每一个文件目录即为一个页面应用，不能乱存放文件和文件目录，在pages文件夹内新建home和note文件，即两个页面应用，将之前src保留的index.js和App.jsx分别拷贝到home和note目录。

• 必不可少用到redux，修改index.js的文件

import React from 'react'
import ReactDOM from 'react-dom'
import { Provider } from 'react-redux'
import { createStore, compose, applyMiddleware } from 'redux'
import { ConfigProvider } from 'antd'
import thunk from 'redux-thunk'
import reducer from '../../store/reducer'
import zhCN from 'antd/es/locale/zh_CN'
import * as serviceWorker from '../../serviceWorker'
import App from './App'

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOS