使用create-react-app打造多页面应用

通过create-react-app创建的工程默认都是单页面的，而有时开发项目不得不使用多页面方式开发，本文将介绍如何将create-react-app创建的模板项目修改为多页面的开发方式。

使用工具版本

nodejs --> v8.16.1
npm --> 6.11.3
yarn --> 1.19.1
create-react-app --> 3.3.0

初始化项目

create-react-app react-multi-page

• 删除src目录下多余文件
  App.css
  App.js
  App.test.js
  index.css
  index.js
  logo.svg
  serviceWorker.js
  setupTests.js
• 修改index.js文件

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

• 修改app.js文件

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
      page1
    </div>
  );
}

export default App;

• 构建多页面项目结构
  —— 在src目录下创建page1、page2目录
  —— 将src之前保留的文件分别复制到page1、page2目录里面
  —— 目录结构如下：
  

弹出webpack配置

先git提交代码，不然没法弹出webpack配置

git add .
git commit -m "项目初始化"
yarn eject

当出现Are you sure you want to eject? This action is permanent?时输入y。

读取src下有的目录名称

进入config/paths.js中配置appIndexJs路径，默认是路径字符串，现在获取几个页面的字符串列表ÿ