Emre

Emre

WFN Üye
Konular
1,644
Mesajlar
1,740
Çözüm
0
Ticaret Puanı
0
Üyelik
9 Ay 3 Gün
Konum
Samsun
Web Sitesi
Var
Alanı
WordPress Uzm.
1/1
Konu sahibi
İçeriği sayfa yenilemeden değiştirmek için tarayıcının History API’sindeki history.pushState() veya history.replaceState() yöntemlerini kullanabilirsiniz. pushState() yeni bir geçmiş kaydı oluşturur; kullanıcı Geri düğmesine bastığında önceki URL’ye dönebilir. replaceState() ise mevcut geçmiş kaydını değiştirir. URL’yi değiştirmek tek başına yeni içeriği yüklemez; ekrandaki içeriği ve uygulamanın durumunu ayrıca güncellemeniz gerekir.

pushState() ile yeni URL oluşturma​


Aşağıdaki örnekte bağlantıya tıklandığında sayfa yeniden yüklenmeden URL /urunler olarak değiştirilir. preventDefault() bağlantının normal gezinme davranışını durdurur, pushState() ise yeni adresi tarayıcı geçmişine ekler.

HTML: 
<a href="/urunler" id="urunler-link">Ürünler</a>
<div id="icerik">Ana sayfa içeriği</div>

<script>
const link = document.querySelector('#urunler-link');
const icerik = document.querySelector('#icerik');

link.addEventListener('click', function (event) {
    event.preventDefault();

    history.pushState(
        { sayfa: 'urunler' },
        '',
        '/urunler'
    );

    icerik.textContent = 'Ürünler sayfası içeriği';
});
</script>

Bu kod çalıştığında adres çubuğunda /urunler görünür ve sayfa yenilenmez. Ancak sunucuda gerçekten /urunler adresine karşılık gelen bir yönlendirme veya dosya yoksa, kullanıcı bu adresi doğrudan açtığında ya da sayfayı yenilediğinde sunucu 404 döndürebilir. Bu nedenle istemci tarafındaki yönlendirme ile sunucu yapılandırmasının birlikte ele alınması gerekir.

pushState() ve replaceState() arasındaki fark​


Hangi yöntemi kullanacağınız, değişikliğin tarayıcı geçmişinde ayrı bir adım olarak görünmesini isteyip istemediğinize bağlıdır.
YöntemGeçmiş davranışıUygun kullanım
pushState()Yeni geçmiş kaydı eklerKullanıcının Geri düğmesiyle önceki uygulama durumuna dönmesi isteniyorsa
replaceState()Mevcut kaydı değiştirirGeçici, düzeltme veya yeniden yönlendirme niteliğindeki URL değişikliklerinde
Örneğin filtre uygulandığında her filtre değişikliğinin geçmişte ayrı bir adım olmasını istiyorsanız pushState() kullanabilirsiniz. İlk açılışta varsayılan URL’yi düzenlemek veya hatalı bir parametreyi düzeltmek istiyorsanız replaceState() daha uygundur.

replaceState() ile mevcut adresi değiştirme​


Aşağıdaki kod URL’deki sayfa parametresini değiştirir, fakat tarayıcı geçmişine yeni kayıt eklemez:

JavaScript: 
const yeniUrl = new URL(window.location.href);
yeniUrl.searchParams.set('sayfa', '2');

history.replaceState(
    { sayfa: 2 },
    '',
    yeniUrl
);

Mevcut adres https://ornek.test/urunler ise sonuç https://ornek.test/urunler?sayfa=2 olur. URL nesnesini kullanmak, mevcut yol ve diğer sorgu parametrelerini yanlışlıkla silmeden yalnızca değiştirmek istediğiniz kısmı güncellemenizi sağlar.

Geri ve İleri düğmelerini yönetme​


pushState() çağrısı URL’yi ve geçmişi değiştirir, fakat Geri veya İleri düğmesine basıldığında uygulamanızın içeriğini kendiliğinden değiştirmez. Bu durumları yakalamak için popstate olayını dinlemeli ve geçmiş kaydındaki state verisine göre ekranı yeniden oluşturmalısınız.

JavaScript: 
function sayfayiGoster(sayfa) {
    const icerik = document.querySelector('#icerik');

    if (sayfa === 'urunler') {
        icerik.textContent = 'Ürünler sayfası içeriği';
    } else {
        icerik.textContent = 'Ana sayfa içeriği';
    }
}

window.addEventListener('popstate', function (event) {
    const sayfa = event.state?.sayfa || 'ana-sayfa';
    sayfayiGoster(sayfa);
});

Yeni bir geçmiş kaydı oluştururken ekranı da aynı mantıkla güncellerseniz akış tutarlı olur:

JavaScript: 
history.pushState(
    { sayfa: 'urunler' },
    '',
    '/urunler'
);

sayfayiGoster('urunler');

Burada URL’nin değişmiş olması, içeriğin doğru yüklendiğini tek başına kanıtlamaz. pushState() yalnızca geçmiş kaydını ve adres çubuğunu günceller. Veri gerekiyorsa bunu ayrıca fetch() ile almalı, gelen sonuca göre ekranı güncellemeli ve hata durumunu kullanıcıya göstermelisiniz.

Dikkat edilmesi gereken sınırlar​


Yeni URL aynı kaynak içindeki bir adres olmalıdır. Başka bir alan adına geçiş yapmak için pushState() kullanılamaz; böyle bir durumda normal yönlendirme veya window.location gerekir. Ayrıca URL’ye kullanıcıya ait parola, erişim belirteci veya başka hassas veriler yazılmamalıdır; adres çubuğu ve tarayıcı geçmişi bu bilgileri görünür hâle getirebilir.

URL’yi değiştirdikten sonra sayfa yenilendiğinde uygulamanın aynı durumu yeniden kurabilmesi için adresi başlangıçta da okumalısınız. Örneğin window.location.pathname ile yol, URLSearchParams ile sorgu parametreleri alınabilir. Kullanıcı /urunler?sayfa=2 adresini doğrudan açtığında uygulamanız bu değeri okuyup ürünler görünümünü ve ikinci sayfayı oluşturmalıdır.

Özetle, kullanıcı hareketi yeni bir gezinme adımı oluşturuyorsa pushState(), mevcut adresi geçmişi büyütmeden düzeltmek istiyorsanız replaceState() kullanın. Her iki yöntemde de URL değişikliği ile ekran güncellemesini ve popstate olayını birlikte yönetmeniz gerekir.
 

Sende şimdi bize katılmak ister misin?

Kayıt ol

Bize katılım kolay ve ücretsizdir!

Üye ol
Foruma git ?

Bu konuyu görüntüleyen kullanıcılar

Bu konuyu şu anda görüntüleyen üye bulunmuyor.
Robotlar:
  • Anthropic
Toplam: 1 (Üye: 0, misafir: 0, robot: 1)