摘要
在React項目中，我們需要采用它的路由庫React-Router來進行頁面跳轉，React會根據路由URL來判斷是哪個頁面。常見的的URL有兩種顯示方式，一種是hashHistory的形式，形如：localhost:3000/#/free-lesson的路由，另一種是browserHistory的形式，形如：localhost:3000/person-center的真實URL路由。在實際項目中常常用真實的URL的方式，但是該形式存在一個隱藏的問題，就是項目打包后，瀏覽器頁面刷新會出現404，為了解決這個問題，需要對服務器做簡單的改動。
React路由應用真實URL
一、React路由變更
hash路由形式的URL代碼如下：
import React from "react"; import ReactDOM from "react-dom"; import App from "./App"; import { HashRouter as Router } from "react-router-dom"; ReactDOM.render( <Router> <App /> </Router>, document.getElementById("root") );
hash路由會自帶 # 號，我們需要去掉 # 號，將hash路由形式替換為browser路由形式，具體代碼如下：
import React from "react"; import ReactDOM from "react-dom"; import App from "./App"; import { BrowserRouter as Router } from "react-router-dom"; ReactDOM.render( <Router> <App /> </Router>, document.getElementById("root") );
二、瀏覽器頁面404解決
本地運行npm start后，URL為真實的URL，但是npm run build打包項目，上傳項目到服務器后，實際項目頁面出現404錯誤。當頁面刷新時，瀏覽器會向服務器請求我們在服務器設置的默認URL，服務器實際會去找根目錄下的build好的html文件，發現找不到，因為實際上我們的服務器並沒有這樣的物理路徑/文件等，或者我們沒有配置處理這個路由，所以內容無法顯示，只有提示404錯誤。為了解決頁面404的問題，我們只需要在服務器上配置處理URL，由於我使用的是nginx，故接下來就講述如何去配置nginx。
三、Nginx服務器配置
配置nginx解決頁面404錯誤，只需要訪問任何路由地址都訪問index.html，這樣就可以自動被React-Router處理，並進行無刷新跳轉。我們在nginx服務器的location中添加代碼行 try_files $uri $uri/ /index.html 即可，部分配合代碼如下：
server { listen 80 default_server; listen [::]:80 default_server; root /usr/local/react/build; //項目打包代碼地址 # Add index.php to the list if you are using PHP index index.html index.htm index.nginx-debian.html; server_name example/test; //項目服務訪問地址 location / { try_files $uri $uri/ /index.html; } }