React Router'da Yükleyici Tarafından Alınan Verileri Kullanma
Önceki derste, bir depodan loader kullanarak veri aldık.
Bu verileri kullanmak için useLoaderData kancasını (hook) kullanacağız.
root.jsx dosyasını açalım ve kancayı içe aktarıma ekleyelim:
import { Outlet, Link, useLoaderData } from 'react-router-dom';
Root fonksiyonunda artık verileri products sabitine alacağız
ve onunla çalışacağız. Eğer herhangi bir ürünümüz varsa, liste görünecek,
yoksa 'no products here ...' ifadesini bir paragrafta göstereceğiz.
nav etiketinde, alınan ürünleri listelemek için standart bir döngü kullanacağız.
Her öğe, bir Link bileşeni içine sarılacak ve her birinin kendi adresi olacak
(bunun hakkında daha sonra konuşacağız). Buna göre, eğer bir ürünün adı yoksa,
varsayılan olarak 'Unnamed' görünecek. Yukarıdakileri dikkate alarak,
Root fonksiyonu için kodumuz artık şu şekilde olacak:
function Root() {
const { products } = useLoaderData();
return (
<div id="main">
{products.length ? (
<nav>
{products.map((product) => (
<Link key={product.id} to={`products/${product.id}`}>
{product.name ? product.name : <i>Unnamed</i>}
</Link>
))}
</nav>
) : (
<p><i>no products here ...</i></p>
)}
<div id="product">
<Outlet />
</div>
</div>
);
}
Eğer şimdi uygulamayı yeniden başlatıp ana sayfaya gidersek,
sadece 'no products here ...' ifadesini göreceğiz,
çünkü henüz depoya herhangi bir ürün koymadık.
Önceki derslerin ödevlerinde oluşturduğunuz uygulamayı alın. Derste anlatıldığı gibi, yükleyiciden alınan öğrenci verilerinin görüntülenmesini ders materyallerinden faydalanarak ekleyin.
