為何不用 Hash Route 了？

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

HashRouter vs BrowserRouter

HashRouter 使用 URL 的 hash 部分（#）來進行路由切換，瀏覽器就不會向伺服器發送請求，而是直接在客戶端處理路由變化

• 優點：不需要伺服器配置，因為 # 後面的內容不會發送到伺服器
• 缺點：URL 看起來不那麼清晰，影響 SEO

BrowserRouter (原因與解決方案)，BrowserRouter 使用乾淨的 URL，如 example.com/about

• 優點：URL 更乾淨，對 SEO 更友好
• 缺點：需要伺服器配置，否則刷新頁面時會 404

為了顧及 SEO，這次的專案不使用 HashRouter，而是使用 BrowserRouter，並透過修改伺服器端配置，讓所有找不道路由的請求都指向 index.html，就能避免 404 的問題了

解決流程

在 App.tsx 中保留 BrowserRouter

1
2
3

import { BrowserRouter, Routes, Route } from "react-router";

<BrowserRouter>...</BrowserRouter>;

伺服器端配置

在 nginx.conf 中，配置伺服器將所有請求重定向到 index.html：

1
2
3

location / {
  try_files $uri $uri/ /index.html;
}

這樣就完美顧及 SEO 了，且不會有找不到路由導致 404 的問題啦

• Next Post →