解決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

1、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") );

2、瀏覽器頁面404解決

　　本地運行npm start後，URL爲真實的URL，可是npm run build打包項目，上傳項目到服務器後，實際項目頁面出現404錯誤。當頁面刷新時，瀏覽器會向服務器請求咱們在服務器設置的默認URL，服務器實際會去找根目錄下的build好的html文件，發現找不到，由於實際上咱們的服務器並無這樣的物理路徑/文件等，或者咱們沒有配置處理這個路由，因此內容沒法顯示，只有提示404錯誤。爲了解決頁面404的問題，咱們只須要在服務器上配置處理URL，因爲我使用的是nginx，故接下來就講述如何去配置nginx。

3、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; } }