單頁應用程式可顯示不同內容,無需載入新頁面。為此,他們會在連結和 History API 上使用點擊處理常式。History API 可用於操控瀏覽器工作階段記錄。這樣一來,我們就能在顯示不同頁面 (在單頁應用程式中通常稱為「檢視畫面」) 時更新網址。並確保瀏覽器的返回按鈕仍能正常運作。
請查看本程式碼研究室中的單頁應用程式。這張圖片會顯示貓或狗的圖片,並提供連結,可在兩種動物之間切換。看起來運作正常!
找出隱藏的 404 錯誤
很抱歉,應用程式中有一項細微錯誤。讓我們來看看!
- 如要預覽網站,請按下「View App」。然後按下「Fullscreen」圖示 。
- 按一下「Doggos」連結。請注意網址的變化。
- 重新載入應用程式。
您會看到含有「Cannot GET /doggos
」的頁面,這是一種隱藏的 404 錯誤。這會造成「隱匿」問題,因為只要您只點選網頁應用程式中的連結,應用程式似乎都能正常運作。在新的瀏覽器視窗中使用網址或重新整理網頁時,會發生錯誤。問題是伺服器不知道如何回應這些網址的要求。網頁應用程式中的 JavaScript 程式碼會使用 History API 在這些網址之間導覽,但伺服器不知道該如何處理這些網址。當伺服器不知道如何處理要求的網址時,就會傳回 HTTP 狀態碼 404
。使用此程式碼時,伺服器會指出找不到要求的網址。
在這種情況下,搜尋引擎不會為網址建立索引,因為使用者會點選搜尋結果,並找到錯誤訊息,但不會找到他們要找的內容,例如狗狗圖片。
修正伺服器
這個專案使用以 JavaScript 編寫的 express.js 伺服器。讓我們修正伺服器,讓它以 index.html 回應,而單頁應用程式會處理其餘部分。
- 按一下「Remix to Edit」,即可編輯專案。
- 選取
server.js
檔案。
這個檔案包含伺服器程式碼。它會設定 express.js 伺服器,並傳送 index.html 的內容。當要求導向網址 /
時,第 15 行中的路由設定只會提供網頁應用程式。伺服器也應提供我們建立的其他網址。我們將這項設定變更為提供所有網址,這樣日後就能搭配其他網址使用。
為此,我們可以將第 15 行開始的程式碼變更為以下內容:
app.get('/*', function(request, response) {
response.sendFile(__dirname + '/views/index.html');
});
/*
會比對任何網址,而伺服器現在會針對任何網址,以 index.html
中的網路應用程式回應。
- 如要預覽網站,請按下「View App」。然後按下「Fullscreen」圖示 。
在新無痕視窗中重新整理及開啟連結,現在應可正常運作。