Trạng thái điều hướng trong React Router

Nếu chúng ta nhấp vào các sản phẩm trong danh sách, chúng ta thấy rằng lần đầu tiên trang sản phẩm được tải với độ trễ, còn những lần sau thì đã nhanh, điều tương tự cũng xảy ra khi thêm và cập nhật sản phẩm, vì chúng ta có bộ nhớ cache ở phía máy khách.

Trong bài học này, chúng ta sẽ hiển thị cho người dùng trang của chúng ta đang ở trạng thái nào. Điều này có thể được hỗ trợ bởi hook useNavigation. Kết quả làm việc của hook này trả về một đối tượng với một số thuộc tính. Chúng ta sẽ quan tâm đến một trong số chúng - thuộc tính state.

Thuộc tính state có thể có 3 giá trị: 'idle' (không có gì xảy ra), 'submitting' (khi gửi biểu mẫu thông qua POST, PUT, PATCH hoặc DELETE và action của route được gọi), 'loading' (khi trình tải cho route tiếp theo được gọi để hiển thị trang tiếp theo). Chúng ta sẽ quan tâm đến giá trị cuối cùng.

Hãy vào tệp root.jsx và nhập hook này:

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

Sau đó, đối với kết quả mà hook trả về, hãy tạo một biến navigation trong hàm Root - trước return:

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

Và bây giờ hãy sử dụng thuộc tính state của nó, nếu giá trị là 'loading', thì chúng ta sẽ đặt lớp loading cho div, nơi chúng ta hiển thị dữ liệu sản phẩm:

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

Chúng ta cần thêm kiểu cho lớp loading vào index.css. Hãy trong trường hợp trạng thái tải chỉ tăng opacity:

div.loading {
	opacity: 0.3;
}

Bây giờ, nếu, sau khi tải lại trang web, nhấp vào các sản phẩm trong danh sách hoặc, ví dụ, thêm một sản phẩm mới, chúng ta sẽ thấy rằng trang hiện tại trong một khoảnh khắc sẽ mờ đi, trước khi trang tiếp theo xuất hiện.

Lấy ứng dụng mà bạn đã tạo trong các bài tập của các bài học trước. Sử dụng tài liệu của bài học, với sự trợ giúp của hook useNavigation hãy làm sao để người dùng có thể thấy rằng trang tiếp theo với dữ liệu sinh viên đang được tải.