Gizli 404 hatalarını düzeltme

Martin Splitt

Tek Sayfalık Uygulamalar yeni bir sayfa yüklemeden farklı içerik gösterebilir. Yapılacaklar bu nedenle bağlantılar ve Geçmiş API'sindeki tıklama işleyicileri kullanır. Geçmiş API şunları sağlar: Tarayıcı oturum geçmişini değiştirme. Bu şekilde, aşağıdaki durumlarda URL'yi güncelleyebiliriz: farklı bir sayfa gösteren (Tek Sayfalık Uygulamalarda genellikle "görüntüleme" olarak adlandırılır). Aynı zamanda 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 gösteriliyor resimler ve iki hayvan arasında geçiş yapmak için bağlantılar sağlar. İşe yarıyor gibi görünüyor iyi.

Gizli 404'ü ortaya çıkarma

Ne yazık ki uygulamada küçük bir hata var. Şimdi bunları inceleyelim.

• Siteyi önizlemek için Uygulamayı Görüntüle'ye basın. Ardından, Tam ekran .
• 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" içeren bir sayfayla karşılaşıyorsunuz bir hata alırdı. "Gizli"dir, çünkü yalnızca içindeki bağlantıları tıkladığınız sürece web uygulaması iyi çalışıyor gibi görünür. somut olarak ortaya koyar. URL'ler yeni bir tarayıcı penceresinde kullanılırken veya sayfa yenilenirken bozuluyor sayfasını ziyaret edin. Sorun, sunucunun bir isteğe nasıl yanıt vereceğini bilmemesidir; kullanmayın. Web uygulamamızdaki JavaScript kodu, ancak sunucu bunlarla ne yapacağını bilmiyor. Sunucu, istenen URL ile ilgili olarak ne yapılacağını bilemediğinde, yanıt olarak 404 HTTP durum koduyla değiştirin. Bu kodla sunucu bulunamadı herhangi bir şey URL'si giremez.

Bu durumda arama motorları URL'leri dizine eklemez çünkü bir kullanıcı ve hata mesajını bulur. Ancak, görüntülenen içeriği değil, köpek resimleri gibi.

Sunucuyu düzeltme

Bu proje, şu dilde yazılmış bir express.js sunucusu kullanır: JavaScript'e dokunun. Şimdi sunucuyu düzeltelim. Böylece, index.html ve tek sayfa uygulaması gerisini halleder.

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

Bu dosya sunucu kodunu içerir. Bir express.js sunucusu kurar ve index.html'nin içeriği hakkında daha fazla bilgi edinin. 15. satırdaki rota ayarı yalnızca web uygulamasını sunar İstekler / URL'sine gittiğinde. Sunucu, istediğimiz diğer URL'leri de oluşturuyor. Bunu tüm URL'leri sunacak şekilde değiştirelim. Böylece ek URL'ler ekleyin.

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

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

/* herhangi bir URL ile eşleşir ve sunucu artık web uygulamasıyla şurada yanıt verir: Belirli bir URL için index.html.

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

Bağlantıları yeni bir gizli pencerede yenileyip açmak artık bekleniyor.