單頁應用程式可顯示不同內容，無需載入新頁面。為此，他們會在連結和 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」圖示 。
在新無痕視窗中重新整理及開啟連結，現在應該會正常運作。