為什麼我的 React Router 在頁面刷新或手動 URL 輸入後不起作用？

在React-router 中處理URL

URL 在刷新或手動輸入時不起作用

使用React-Router 時，有一個區別伺服器端和客戶端路由之間。通常，您的應用程式會先向伺服器發送初始請求，以取得包含 React 腳本的靜態 HTML 檔案。載入後，客戶端將處理後續的 URL 更改，而無需發出新的伺服器請求。

問題：當您刷新或手動輸入與伺服器端路由一致的 URL 時（例如，/joblist）在客戶端路由模式下，它不會呈現預期的視圖。相反，您可能會遇到“無法取得/作業清單”錯誤。

伺服器端與客戶端路由

伺服器端：伺服器處理所有 URL路由。在靜態 HTML 網站中，伺服器會傳送特定 URL 的 HTML 頁面，例如 /joblist。

客戶端路由： React-Router 在客戶端處理 URL 路由。它不是從伺服器請求新頁面，而是根據 URL 變更動態更新顯示的內容。

解決問題

要解決此問題，您需要在兩台伺服器上建立路由和客戶端。以下是可能的方法：

雜湊歷史記錄（瀏覽器歷史記錄的前身）

此方法使用帶有雜湊(#) 前綴的URL，例如/joblist#/about 。哈希之後的部分不會發送到伺服器，因此伺服器始終看到根 URL (/)。客戶端，React-Router 處理 #/about 部分。

缺點：

• 不吸引人的 URL
• 沒有伺服器端渲染, 產生負面影響SEO。

Catch-All

在伺服器上設定一個包羅萬象的路由。例如，如果伺服器收到任何與特定路由不符的 URL，它將發送 index.html 檔案。這可以確保無論輸入什麼 URL，React 應用程式都會載入。

缺點：

• 更複雜的設定
• SEO次優，因為所有頁面都傳回相同的content.

混合

這種方法將重要頁面的包羅萬象與特定的伺服器端路由結合。您可以為這些頁面提供靜態 HTML 文件，使其內容可供搜尋引擎使用。

缺點：

• 設定更複雜
• 有限的SEO 優點
• 程式碼重複（在客戶端和客戶端和客戶端端上呈現內容）

同構

在這種方法中，伺服器和客戶端都執行相同的 JavaScript 程式碼。這透過向客戶端發送相同的標記來解決問題，無論頁面轉換發生在伺服器端還是客戶端。

缺點：

• 伺服器必須執行JavaScript（通常是Node.js）
• 環境挑戰
• 陡峭的學習曲線

選擇正確的解決方案

考慮以下因素因素：

• 簡單性： Catch-all 是相對簡單的設定。
• SEO： 同構是 SEO 的最佳解決方案，但這需要更多的努力。
• 伺服器技術：如果您的伺服器運行在 Node.js 上，那麼同構是一個合適的選擇。

最終，最適合您的選擇取決於您的特定要求和技術能力。

以上是為什麼我的 React Router 在頁面刷新或手動 URL 輸入後不起作用？的詳細內容。更多資訊請關注PHP中文網其他相關文章！