解決React Vite網站，按上一頁、F5重新整理後，網頁會出現404錯誤的問題

解決React Vite網站，按上一頁、F5重新整理後，網頁會出現404錯誤的問題

前言

本部落格網站是使用React Vite的技術而打造，一開始在本機開發完成，測試操作也都沒問題之後，就會放上正式的雲端伺服器。但因為想要提升讀取和瀏覽器執行的效率，放上伺服器之前，會先使用 run npm build 打包成靜態網頁，然後才將檔案放進伺服器。

但問題來了，在放上伺服器之後，使用瀏器器閱讀頁面，有時候會按上一頁，居然出現了404找不到網頁的錯誤！我大吃一驚，怎麼會有這種問題，再按個F5重新整理頁面，哇怎麼還是一樣。好吧！不相信有這種事會發生，乾脆直接使用網址好了，於是直接打網址，沒想到還是有同樣的情形。

原因

React Vite 專案使用了 Client-side Routing，在打包成靜態網頁後，當按上一頁或重新整理時，瀏覽器會向伺服器請求如 /about 或 /blog 的實際檔案，但是網頁伺服器無法正確處理「非首頁路徑」的請求，伺服器認為找不到該檔案，便會回報 404錯誤。

同樣的原理，在我輸入網址的時候，因為也並不是直接打「某個檔案」的名稱，像是

https://blog.jdreamplanet.com/blog

當伺服器在處理 /blog 這個請求的時候也一樣，沒辦法正確找到index.html，所以也出現了404錯誤。

解法

我的網頁伺服器是使用Apache所架設，所以只要在網頁的目錄中加上正確的 .htaccess檔案，修改 mod_rewrite 模組來處理 URL 重寫，讓它能在處理非首頁路徑時，導向 index.html就可以正常顯示了。

<IfModule mod_rewrite.c>
  RewriteEngine On
  
  # 設定基礎路徑為根目錄
  RewriteBase /
  
  # 如果請求的是實際存在的檔案（如 .js, .css, .png），則直接讀取
  RewriteCond %{REQUEST_FILENAME} !-f
  
  # 如果請求的是實際存在的目錄，則直接讀取
  RewriteCond %{REQUEST_FILENAME} !-d
  
  # 其餘所有路徑（如 /about, /contact）全部導向 index.html
  # 讓 React Router 接手處理路由
  RewriteRule . /index.html [L]
</IfModule>

測試之後果然可以正常執行，解決我困擾了好幾天的問題！