摘要
在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;
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/147278.html
標籤：JavaScript
上一篇：戲說前端之CSS編碼規范
下一篇：JS中this的幾種情況