Định tuyến phía máy khách trong React Router

Trong bài học này, chúng ta sẽ xem xét một thành phần quan trọng của các ứng dụng một trang (SPA) - định tuyến phía máy khách. Định tuyến như vậy cho phép chúng ta cập nhật URL trong trình duyệt mà không cần các yêu cầu bổ sung để tải tài liệu từ máy chủ.

Hãy khởi chạy ứng dụng mà chúng ta đã tạo trong bài học trước. Mở bảng điều khiển nhà phát triển và trong đó, mở tab 'Network' (Network cho Chrome). Sau mỗi lần nhấp vào các liên kết của chúng ta, chúng ta thấy mỗi lần có một yêu cầu tải document. Tức là mỗi lần chúng ta đều yêu cầu máy chủ tải lại document cho chúng ta.

Bây giờ hãy sử dụng lợi thế của React Router để loại bỏ những yêu cầu như vậy. Để làm điều này, hãy mở root.jsx của ứng dụng của chúng ta và thay thế thẻ a trong đánh dấu bằng thành phần Link. Đầu tiên, hãy thêm import của nó:

import { Outlet, Link } from 'react-router-dom';

Bây giờ hãy thay thế các thẻ a với thuộc tính href. Thay vì đoạn mã:

<a href={`/products/1`}>Product1</a>
<a href={`/products/2`}>Product2</a>

Chúng ta sẽ có mã sau:

<Link to={`/products/1`}>Product1</Link>
<Link to={`/products/2`}>Product2</Link>

Mở lại tab 'Network' trong bảng điều khiển nhà phát triển, trên thanh địa chỉ đặt đường dẫn gốc và làm mới trang. Bây giờ nhấp vào các liên kết và bạn sẽ thấy rằng document chỉ được yêu cầu một lần duy nhất khi tải ban đầu và ở những lần nhấp sau đó không còn yêu cầu lên máy chủ nữa.

Hãy lấy ứng dụng do 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, hãy triển khai trong đó định tuyến phía máy khách, bằng cách sửa đổi các liên kết của bạn như đã mô tả trong bài học.