Đã giải quyết: chuyển dữ liệu điều hướng dom bộ định tuyến phản ứng

Vấn đề chính liên quan đến việc truyền dữ liệu khi điều hướng với React Router DOM là dữ liệu phải được truyền trong chuỗi truy vấn URL. Điều này có nghĩa là mọi thông tin nhạy cảm phải được mã hóa trước khi được chuyển, vì thông tin này sẽ hiển thị trong URL. Ngoài ra, nếu dữ liệu quá lớn, nó có thể vượt quá độ dài tối đa của URL và gây ra lỗi. Cuối cùng, nếu bạn đang sử dụng React Router DOM để điều hướng giữa các trang trong một ứng dụng, bạn cũng phải quản lý trạng thái theo cách thủ công và theo dõi các thay đổi để đảm bảo rằng tất cả các thành phần đều có quyền truy cập vào cùng một dữ liệu.

import { useHistory } from "react-router-dom";

const MyComponent = () => {
  const history = useHistory();

  const handleClick = (data) => {
    history.push({ pathname: '/myroute', state: data }); // pass data to route as state object
  };

  return (
    <button onClick={() => handleClick(data)}>Go to MyRoute</button>
  );
};

// Dòng 1: Dòng này nhập hook useHistory từ thư viện Reac-router-dom.
// Dòng 3: Dòng này khai báo một hằng có tên là MyComponent, là một hàm trả về JSX.
// Dòng 4: Dòng này khai báo một hằng có tên là history được gán cho hook useHistory được nhập từ Reac-router-dom.
// Dòng 6: Dòng này khai báo một hàm gọi là handleClick nhận một tham số là data.
// Dòng 7: Dòng này sử dụng đối tượng history để đẩy một tuyến đường mới vào ngăn xếp với tên đường dẫn '/myroute' và dữ liệu trạng thái được truyền dưới dạng một đối tượng.
// Dòng 9 – 11: Các dòng này trả về JSX chứa phần tử nút có trình xử lý sự kiện onClick gọi hàm handleClick và chuyển dữ liệu dưới dạng đối số.

Phản ứng bộ định tuyến Dom

React Router DOM là một thư viện định tuyến dành cho React, cho phép các nhà phát triển tạo và quản lý các tuyến trong các ứng dụng React của họ. Nó cung cấp các thành phần cốt lõi cần thiết để xây dựng các ứng dụng web phức tạp, nhiều trang với React, bao gồm các thành phần như Liên kết, Định tuyến, Chuyển đổi và Trình duyệtRouter. Nó cũng cung cấp các tính năng như kết hợp tuyến đường động và theo dõi vị trí. Với React Router DOM, các nhà phát triển có thể dễ dàng tạo các ứng dụng một trang với nhiều chế độ xem và tuyến đường mà không cần phải quản lý thủ công URL hoặc lịch sử trình duyệt.

Làm cách nào để bạn chuyển dữ liệu qua điều hướng trong Reac-router-Dom

Trong React Router, dữ liệu có thể được chuyển qua điều hướng bằng cách sử dụng đối tượng trạng thái của API lịch sử. Đối tượng trạng thái có thể truy cập thông qua các đạo cụ của bất kỳ thành phần nào được hiển thị bởi một thành phần. Để truyền dữ liệu, bạn có thể thêm nó vào đối tượng trạng thái khi gọi hàm điều hướng. Ví dụ:

const { lịch sử } = this.props;
history.push({
tên đường dẫn: '/ some/path',
trạng thái: { someData: 'data' }
});