單頁應用程式不需載入新頁面就能顯示不同的內容。待辦 因此，它們會對連結和 History API 使用點擊處理常式。「歷史」 API 可讓您 操控瀏覽器工作階段紀錄。以便我們在偵測到問題時 顯示不同網頁 (通常在單頁應用程式中稱為「檢視」)。此外， 確認瀏覽器的返回按鈕是否正常運作。
我們來看看本程式碼研究室中的單一頁面應用程式。顯示貓或狗 並提供切換介面的連結。似乎可以用 沒問題！
揭開幕後的 404 錯誤
遺憾的是，應用程式裡有細微錯誤。一起來看看！
- 如要預覽網站，請按下「查看應用程式」。然後按下
全螢幕
。 - 按一下「Doggos」連結。請注意網址的變更情形。
- 重新載入應用程式。
系統顯示了一個含有「Cannot GET /doggos」的頁面出現 the neaky 404會說「偷襲」
因為只要您只在
基礎架構在新的瀏覽器視窗或重新整理
頁面。問題在於伺服器不知道如何回應
這些網址。網路應用程式中的 JavaScript 程式碼使用 History API
但伺服器不知道如何處理這些 Pod
當伺服器不知道要如何處理要求的網址時，
並顯示 HTTP 狀態碼 404。伺服器指出找不到這個驗證碼
任何有關要求網址的資訊
在此情況下，搜尋引擎不會為網址建立索引，因為使用者 找到錯誤訊息，但找不到內容 例如狗狗的相片
修正伺服器
此專案使用 express.js JavaScript。讓我們修正伺服器，讓伺服器傳回 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。
- 如要預覽網站，請按下「查看應用程式」。然後按下
全螢幕
。
在新的無痕式視窗中重新整理及開啟連結後，現在應可正常運作 。