สถานะการนำทางใน React Router

หากเราคลิกที่สินค้าในรายการ เราจะเห็นว่าครั้งแรกหน้า สินค้าจะโหลดมาช้า แต่ครั้งต่อๆ ไปจะเร็ว นั่นคือสิ่งเดียวกัน เมื่อเพิ่มและอัปเดตสินค้า เพราะเรามีแคชฝั่ง ไคลเอนต์

ในบทเรียนนี้เราจะแสดงให้ผู้ใช้เห็น ว่าหน้านี้ของเราอยู่ในสถานะใด ในการนี้เราสามารถใช้ ฮุค useNavigation ได้ ผลลัพธ์ จากการทำงานของฮุคนี้จะให้ออบเจกต์ที่มี คุณสมบัติหลายอย่าง สิ่งที่เราจะสนใจคือ หนึ่งในนั้น - คุณสมบัติ state

คุณสมบัติ state สามารถมีค่าได้ 3 ค่า: 'idle' (ไม่มีอะไรเกิดขึ้น) 'submitting' (เมื่อส่งฟอร์ม ผ่าน POST, PUT, PATCH หรือ DELETE แล้วเรียก action ของเส้นทาง) 'loading' (เมื่อเรียก loader สำหรับเส้นทางถัดไป เพื่อ แสดงผลหน้าถัดไป) สิ่งที่เราจะ สนใจคือค่าสุดท้าย

มาเข้าไฟล์ root.jsx และ นำเข้าฮุคนี่กัน:

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

จากนั้น สำหรับผลลัพธ์ที่ฮุคส่งคืน ให้สร้างตัวแปร navigation ในฟังก์ชัน Root - ก่อน return:

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

และตอนนี้มาใช้คุณสมบัติ state ของมัน ถ้าเป็นค่า 'loading' เราจะตั้งคลาส loading ให้กับ div ที่มี การแสดงผลข้อมูลสินค้าอยู่:

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

สิ่งที่เราต้องทำเหลือคือเพิ่มสไตล์สำหรับ คลาส loading ใน index.css มา ในกรณีสถานะกำลังโหลดแค่ เพิ่ม opacity:

div.loading {
	opacity: 0.3;
}

ตอนนี้ ถ้าเราโหลดเว็บไซต์ใหม่ และคลิกที่สินค้าในรายการหรือ เช่น เพิ่มสินค้าใหม่ เราจะ เห็นว่าหน้าปัจจุบันจะมัวลงชั่วครู่ ก่อนที่ หน้าถัดไปจะปรากฏ

นำแอปพลิเคชันที่คุณสร้างใน แบบฝึกหัดบทเรียนที่ผ่านมา ใช้ เนื้อหาจากบทเรียน โดยใช้ฮุค useNavigation ทำให้ ผู้ใช้สามารถเห็นว่า หน้าถัดไปพร้อมข้อมูลนักเรียน กำลังโหลดอยู่