首頁程式設計

# 為何需要 Hash Route？

解決 React Router 在部署到伺服器上時，重新整理會出現 404 的問題。因為 React Router 是使用 navigate 在內部進行頁面的切換，而這個功能是由瀏覽器提供的，所以當我們重新整理時，瀏覽器會向伺服器發送請求，但是伺服器並沒有這個路由，所以會出現 404 的問題。

也就是目前的狀況是，儘管能在網站內透過點擊連結進行頁面切換，但是一旦重新整理頁面或是透過直接輸入網址的方式進入網站，就會出現錯誤：

no_hash_route

// App.js
import { HashRouter, Routes, Route } from "react-router-dom";

<HashRouter>
 <div className='App'>
  <Header />
  <main className='py-3'>
   <Container>
    <Routes>
     <Route path='/' element={<HomePage />} />
     <Route path='/login' element={<LoginPage />} />
                    ...
</HashRouter>

一樣這次需要到 /frontend 目錄下執行 npm run build 後才會生效

# 靜態網站邏輯

傳統的 Browser Router（History API） 需要伺服器支援，例如設定 .htaccess 或 nginx 來將所有請求重導向到 index.html，否則刷新頁面會導致 404 錯誤。Hash Route 則完全在前端運行，無需伺服器端的特殊設定，適合靜態網站（如 GitHub Pages）。