一条龙服务:
1、全局安装create-react-app
npm install -g create-react-app
2、创建项目,安装依赖
create-react-app my-react-app
3、进入项目
cd my-react-app
4、启动项目
npm start
项目启动,只有一个页面,下面开始安装路由,创建属于自己的结构
打开项目,在src下,创建几个新的文件夹:
-
创建pages文件夹,放路由组件
-
创建router文件夹,放路由js
-
创建store文件夹,放redux
-
创建utils文件夹,放js工具类
项目目录如图:
项目目录
配置路由:
- 首先安装路由组件:
react-router-dom
npm install react-router-dom --save-dev
- router.js如下:
代码:
import React, {Component} from 'react';
import {HashRouter,Switch,Route,Redirect} from "react-router-dom";//引入routerdom
import goodsDetails from '../components/goods/goodsDetails'//导入的组件
import manage from "../components/manage/manage";
class Router extends Component {
render() {
return (
<div>
<HashRouter>
<Switch>
<Route path="/goodsxq" component={goodsDetails}/>
<Route path="/" component={manage}/>
</Switch>
</HashRouter>
</div>
);
}
}
export default Router;
- index.js修改如下:
以上完成路由配置
最后,看下pages里
这里引用了immutable,需要安装一下,
npm install immutable
启动项目即可,自带热更新。
下边提供将src根路径替换成@的方法,效果如下图
方法:
- 安装react-app-rewired
npm install react-app-rewired --save-dev
- 跟路径下,添加config-overrides.js,如下
config-overrides.js
- 修改package.json,如下
packjson.json
ok,先到这里