解決React路由URL中hash(#)部分的顯示 、browserHistory打包後瀏覽器刷新頁面出現404的問題

摘要

　　在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; 
    }
}