搭建react项目并配置路由

一条龙服务：

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下，创建几个新的文件夹:

1. 创建pages文件夹，放路由组件

2. 创建router文件夹，放路由js

3. 创建store文件夹，放redux

4. 创建utils文件夹，放js工具类

项目目录如图:

项目目录

配置路由：

1. 首先安装路由组件：

react-router-dom

npm install react-router-dom --save-dev

2. 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;

4. index.js修改如下:
   

以上完成路由配置

最后，看下pages里

这里引用了immutable，需要安装一下，

npm install immutable

启动项目即可，自带热更新。

下边提供将src根路径替换成@的方法，效果如下图

方法：

1. 安装react-app-rewired

npm install react-app-rewired --save-dev

2. 跟路径下，添加config-overrides.js,如下
   config-overrides.js
   
3. 修改package.json,如下
   packjson.json
   

ok，先到这里