State Navigasi dalam React Router

Jika kita klik pada produk dalam senarai, kita lihat bahawa pada kali pertama halaman produk dimuat dengan kelewatan, dan pada kali seterusnya sudah pantas, perkara yang sama apabila menambah dan mengemas kini produk, kerana kita mempunyai cache di bahagian klien.

Dalam pelajaran ini, kita akan tunjukkan kepada pengguna dalam keadaan apa halaman kita berada. Dalam hal ini, kita boleh dibantu oleh hook useNavigation. Hasil kerjanya, hook ini mengeluarkan objek dengan beberapa sifat. Kita akan berminat dengan salah satu daripadanya - sifat state.

Sifat state boleh mempunyai 3 nilai: 'idle' (tiada apa-apa berlaku), 'submitting' (apabila menghantar borang melalui POST, PUT, PATCH atau DELETE, action route dipanggil), 'loading' (apabila pemuat untuk route seterusnya dipanggil, untuk melukis halaman seterusnya). Kita akan berminat dengan nilai terakhir.

Mari kita pergi ke fail root.jsx dan import hook ini:

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

Kemudian, untuk hasil yang dikembalikan oleh hook, kami akan buat pembolehubah navigation dalam fungsi Root - sebelum return:

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

Dan sekarang mari kita gunakan sifatnya state, jika ia adalah nilai 'loading', maka kami akan tetapkan kelas loading untuk div, di mana kita melakukan lukisan data produk:

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

Kita tinggal menambah gaya untuk kelas loading dalam index.css. Mari dalam keadaan memuat, kita hanya tambahkan opacity:

div.loading {
	opacity: 0.3;
}

Sekarang, jika, dengan memuat semula tapak, klik pada produk dalam senarai atau, contohnya, tambah produk baru, kita akan lihat bahawa halaman semasa untuk seketika akan menjadi pudar, sebelum halaman seterusnya muncul.

Ambil aplikasi, yang dibuat oleh anda dalam tugasan untuk pelajaran lepas. Menggunakan bahan pelajaran, dengan bantuan hook useNavigation, buat supaya pengguna dapat melihat bahawa halaman seterusnya dengan data pelajar sedang dimuat.