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如下:
   

    

    

3. 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，先到這里