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