單一頁面應用程式可以顯示不同內容，不必載入新網頁。方法是使用連結和 History API 的點擊處理常式。記錄 API 可讓您管理瀏覽器工作階段記錄。如此一來，當顯示其他網頁 (通常在單頁應用程式中稱為「檢視」) 時，我們就能更新網址。這也能確保瀏覽器的返回按鈕正常運作。
查看本程式碼研究室中的單頁應用程式。當中會顯示貓或狗的圖片，並提供切換這兩種動物的連結。看起來還不錯！
發掘幕後花絮 404
很抱歉，應用程式存在細微錯誤。一起來看看！
- 如要預覽網站，請按下「查看應用程式」，然後按下「全螢幕」圖示
。 - 點選「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 中的網頁應用程式回應。
- 如要預覽網站，請按下「查看應用程式」，然後按下「全螢幕」圖示 。
現在在新的無痕式視窗中重新整理及開啟連結後，應該就能正常運作。