Django + React 電商專案練習 [17] - Hash Route

為何需要 Hash Route？

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13

// 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）。

• ← Previous Post
• Next Post →