Gizli 404 hatalarını düzeltme

Martin Splitt
Martin Splitt
X GitHub

Tek Sayfalı Uygulamalar, yeni bir sayfa yüklemeden farklı içerikler gösterebilir. Bunu yapmak için bağlantılarda tıklama işleyicileri ve History API'yi kullanırlar. History API, tarayıcı oturum geçmişini değiştirmenize olanak tanır. Bu sayede, farklı bir sayfa gösterilirken (Tek Sayfalı Uygulamalarda genellikle "görünüm" olarak adlandırılır) URL'yi güncelleyebiliriz. Ayrıca tarayıcının geri düğmesinin beklendiği gibi çalışmaya devam etmesini sağlar.

Bu codelab'deki tek sayfalık uygulamaya göz atın. Kedi veya köpek resimleri gösterir ve iki hayvan arasında geçiş yapmak için bağlantılar sağlar. İyi çalışıyor gibi görünüyor.

Sinsi 404'ü ortaya çıkarma

Maalesef uygulamada küçük bir hata var. Gelin birlikte inceleyelim.

  • Siteyi önizlemek için Uygulamayı Görüntüle'ye basın. Ardından Tam Ekran'a tam ekran basın.
  • Doggos bağlantısını tıklayın. URL'nin nasıl değiştiğine dikkat edin.
  • Uygulamayı yeniden yükleyin.

"Cannot GET /doggos" ifadesinin yer aldığı bir sayfa (gizli 404) görürsünüz. Bu "sinsi" bir sorundur çünkü web uygulaması, yalnızca içindeki bağlantıları tıkladığınız sürece düzgün çalışıyor gibi görünür. URL'ler yeni bir tarayıcı penceresinde kullanıldığında veya sayfa yenilendiğinde bağlantı kopar. Sorun, sunucunun bu URL'ler için gelen isteklere nasıl yanıt vereceğini bilmemesidir. Web uygulamamızdaki JavaScript kodu, aralarında gezinmek için History API'yi kullanır ancak sunucu bunlarla ne yapacağını bilmez. Sunucu, istenen bir URL için ne yapacağını bilmediğinde 404 HTTP durum koduyla yanıt verir. Sunucu bu kodla, istenen URL için herhangi bir şey bulamadığını belirtir.

Bu durumda arama motorları URL'leri dizine eklemez. Çünkü kullanıcı bir arama sonucunu tıkladığında aradığı içeriği (ör. köpek resimleri) değil, hata mesajını görür.

Sunucuyu düzeltme

Bu projede JavaScript ile yazılmış bir express.js sunucusu kullanılır. Sunucuyu, index.html ile yanıt verecek şekilde düzeltelim. Geri kalan işlemleri tek sayfalık uygulama halleder.

  • Projeyi düzenlenebilir hale getirmek için Düzenlemek için remiksle'yi tıklayın.
  • server.js dosyasını seçin.

Bu dosya, sunucu kodunu içerir. Bu komut, bir express.js sunucusu oluşturur ve index.html dosyasının içeriğini gönderir. 15. satırdaki rota ayarı, yalnızca istekler / URL'sine gittiğinde web uygulamasını sunar. Sunucu, oluşturduğumuz diğer URL'leri de sunmalıdır. Bunu tüm URL'leri sunacak şekilde değiştirerek gelecekte ek URL'lerle de çalışmasını sağlayalım.

Bunun için 15. satırdan başlayan kodu şu şekilde değiştirebiliriz:

app.get('/*', function(request, response) {
  response.sendFile(__dirname + '/views/index.html');
});

/*, tüm URL'lerle eşleşir ve sunucu artık herhangi bir URL için index.html içindeki web uygulamasıyla yanıt verir.

  • Siteyi önizlemek için Uygulamayı Görüntüle'ye basın. Ardından Tam Ekran'a tam ekran basın.

Yenileme ve bağlantıları yeni bir gizli pencerede açma işlemleri artık beklendiği gibi çalışacaktır.