Vấn đề chính liên quan đến việc truyền dữ liệu trong lịch sử bộ định tuyến phản ứng, là dữ liệu không được duy trì trong các lần làm mới trang. Khi người dùng làm mới trang, dữ liệu được lưu trữ trong history.push sẽ bị mất và sẽ không có sẵn để sử dụng trong các lần tải trang tiếp theo. Điều này có thể dẫn đến hành vi không mong muốn và có thể gây ra sự cố khi cố gắng truy cập hoặc lưu trữ dữ liệu từ lần tải trang trước đó.
import { useHistory } from "react-router-dom";
const MyComponent = () => {
const history = useHistory();
const handleClick = (data) => {
history.push({ pathname: "/mypage", state: data });
};
return <button onClick={() => handleClick({ someData: "data" })}>Go</button>;
};
1. Dòng này nhập hook useHistory từ thư viện react-router-dom, cung cấp quyền truy cập vào đối tượng lịch sử theo dõi vị trí hiện tại trong ứng dụng.
2. Dòng này khai báo một thành phần chức năng được gọi là MyComponent và gán nó cho một biến không đổi.
3. Dòng này sử dụng móc useHistory được nhập trong dòng 1 để truy cập vào đối tượng lịch sử và gán nó cho một biến không đổi có tên là lịch sử.
4. Dòng này khai báo một hàm có tên handleClick, nhận một đối số có tên là dữ liệu và đẩy một đối tượng chứa các thuộc tính tên đường dẫn và trạng thái vào ngăn xếp lịch sử bằng cách sử dụng history.push().
5. Dòng này trả về một phần tử nút có trình xử lý sự kiện onClick gọi hàm handleClick() với một đối tượng chứa someData làm đối số của nó khi được người dùng nhấp vào.
đẩy lịch sử
Đẩy lịch sử trong React Router là một phương pháp được sử dụng để thay đổi URL trong trình duyệt theo chương trình mà không cần làm mới trang. Nó cho phép các nhà phát triển tạo các ứng dụng một trang vẫn có thể xử lý điều hướng và liên kết sâu. Đẩy lịch sử hoạt động bằng cách sử dụng API lịch sử của trình duyệt, cho phép nhà phát triển thao tác với URL hiện tại mà không cần tải lại trang. Điều này giúp người dùng có thể điều hướng giữa các trang khác nhau của ứng dụng mà không phải tải lại mỗi lần. Ngoài ra, nó có thể được sử dụng để liên kết sâu, cho phép người dùng liên kết trực tiếp vào các phần cụ thể của ứng dụng.
Làm cách nào để sử dụng lịch sử trong bộ định tuyến phản ứng
React Router cung cấp một cách để sử dụng lịch sử trong các ứng dụng React của bạn. Lịch sử cho phép bạn theo dõi trang hiện tại cũng như bất kỳ trang nào trước đó đã được truy cập. Điều này rất hữu ích để tạo điều hướng và theo dõi hành động của người dùng.
Để sử dụng lịch sử trong React Router, bạn cần tạo một đối tượng lịch sử bằng phương thức createHistory() từ gói lịch sử. Điều này sẽ cung cấp cho bạn quyền truy cập vào các phương thức như đẩy(), thay thế() và đi(). Các phương thức này cho phép bạn thao tác với URL của trình duyệt và điều hướng giữa các tuyến khác nhau trong ứng dụng của bạn. Bạn cũng có thể sử dụng phương thức listen() để lắng nghe các thay đổi trong URL và cập nhật ứng dụng của mình cho phù hợp.
Khi bạn đã tạo một đối tượng lịch sử, bạn có thể chuyển nó vào thành phần bộ định tuyến của mình khi tạo nó. Điều này sẽ cho phép React Router theo dõi tất cả các thay đổi do người dùng thực hiện và cập nhật cho phù hợp.
Sử dụng lịch sử với React Router giúp nhà phát triển dễ dàng tạo các thành phần điều hướng mạnh mẽ, dễ hiểu và tương tác với người dùng.
