通过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
路径,默认是路径字符串