React Router'da Gezinme Durumu

Listedeki ürünlere tıklarsak, ilk seferinde ürün sayfasının gecikmeyle yüklendiğini, diğer seferlerde ise hızlı bir şekilde yüklendiğini görürüz, aynı şey ürün eklerken ve güncellerken de olur, çünkü istemci tarafında önbelleğimiz var.

Bu derste, kullanıcıya sayfamızın hangi durumda olduğunu göstereceğiz. Bu konuda bize useNavigation kancası yardımcı olabilir. Bu kanca bir dizi özelliği olan bir nesne döndürür. Bizim ilgileneceğimiz özelliklerden biri - state özelliği olacak.

state özelliği 3 değere sahip olabilir: 'idle' (hiçbir şey olmuyor), 'submitting' (POST, PUT, PATCH veya DELETE üzerinden bir form gönderildiğinde ve rotanın action'ı tetiklendiğinde), 'loading' (bir sonraki rotanın yükleyicisi, bir sonraki sayfayı oluşturmak için tetiklendiğinde). Biz son değerle ilgileneceğiz.

Hadi root.jsx dosyasına girelim ve bu kancayı içe aktaralım:

import { useNavigation } from 'react-router-dom';

Daha sonra, kancanın döndürdüğü sonuç için, Root fonksiyonunda return'den önce bir navigation değişkeni tanımlayalım:

const { products } = useLoaderData();
const navigation = useNavigation();

Ve şimdi onun state özelliğini kullanacağız, eğer değer 'loading' ise, ürün verilerinin oluşturulduğu div için loading sınıfını ayarlayacağız:

<div id="product" className={navigation.state === 'loading' ? 'loading' : ''}>
	<Outlet />
</div>

loading sınıfı için index.css dosyasına stil eklememiz kaldı. Yükleme durumunda sadece opacity'yi artıralım:

div.loading {
	opacity: 0.3;
}

Şimdi, siteyi yeniden yükleyip, listedeki ürünlere tıklarsak veya, örneğin, yeni bir ürün eklersek, bir sonraki sayfa görünmeden önce mevcut sayfanın bir an için solduğunu göreceğiz.

Önceki derslerin ödevlerinde oluşturduğunuz uygulamayı alın. Ders materyallerinden yararlanarak, useNavigation kancasını kullanarak, kullanıcının bir sonraki öğrenci verileri sayfasının yüklendiğini görebilmesini sağlayın.