一、創(chuàng)建項目

1.npm install -g create-react-app；

2.create-react-app my-app（my-app為項目名字）；

這樣一個react項目就初始化好了，運行npm start啟動項目可查看，接下來可以配置路由。

二、多頁面路由

1.安裝React Router

React Router已被拆分成三個包：react-router,react-router-dom和react-router-native。你不需要直接安裝react-router，react-router包提供核心的路由組件與函數。其余兩個提供運行環(huán)境（瀏覽器與react-native）所需的特定組件，但是他們都暴露出react-router中暴露的對象與方法。你應該為你的環(huán)境選擇正確的包。我們進行的是網站（將會運行在瀏覽器）構建，所以應安裝react-router-dom。

npm install -save react-router-dom

當進行新項目時，你需要選擇使用哪種路由。對于瀏覽器項目（網站），react-router4提供了和兩個組件。前者在你有服務器處理動態(tài)請求的時候使用，后者在靜態(tài)網站的時候使用。

通常我們選擇使用，但是如果你的網站將運行在只有靜態(tài)文件的服務器上，是一個不錯的方案。

對于我們的項目，我們假設我們的網站將架設在動態(tài)服務器上，所以我們選擇的路由組件是<BrowserRouter>

2.創(chuàng)建路由，使用Link來進行路由導航

在src目錄下新建Routes.js文件，定義路由：

修改App.js文件：

修改src目錄下的index.js文件：

這樣路由就配置好了，在頁面中可以用Link標簽進行跳轉：

現在一個簡單的demo就完成了，接下來是打包發(fā)布。

三、打包

在項目目錄下，運行npm run build，進行打包，打包完成后會在目錄下生成一個build文件夾，build生成的這些東西要放在服務器root下。

四、布署

布署的時候你必須把build里的文件直接放到服務器的根路徑下，比如，你的服務器IP是47.96.134.256，應用服務器端口為8080，你應該保證http://47.96.134.256:8080這種訪問方式，訪問到的是你的build下的文件。如果你希望以http://47.96.134.256:8080/build/index.htm這種方式訪問應用，那么你可以在package.json文件中增加一個homepage字段：

"homepage": ".",