Đã giải quyết: nhận truy vấn từ bộ định tuyến phản ứng url dom v6

Vấn đề chính liên quan đến việc nhận truy vấn từ URL React Router DOM v6 là nó không cung cấp cách tích hợp để truy cập các tham số truy vấn. Thay vào đó, các nhà phát triển phải phân tích chuỗi URL theo cách thủ công và tự trích xuất các tham số truy vấn. Đây có thể là một quá trình tẻ nhạt và có thể dẫn đến lỗi nếu không được thực hiện đúng cách. Ngoài ra, nếu cấu trúc URL thay đổi, mã có thể cần phải được cập nhật cho phù hợp.

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

const MyComponent = () => {
  const location = useLocation();

  const queryParams = new URLSearchParams(location.search);

  return (
    <div>
      <h1>My Component</h1>
      <p>Query Param: {queryParams.get("myParam")}</p>
    </div>
  );  
};

1. “nhập { useLocation } từ 'reac-router-dom';” – Dòng này nhập hook useLocation từ thư viện react-router-dom.
2. “const MyComponent = () => {” – Dòng này khai báo một hàm gọi là MyComponent sẽ trả về một thành phần React.
3. “vị trí const = useLocation();” – Dòng này sử dụng hook useLocation đã nhập để lấy thông tin về vị trí hiện tại của ứng dụng (ví dụ: URL).
4. “const queryParams = new URLSearchParams(location.search);” – Dòng này tạo một đối tượng chứa tất cả các tham số truy vấn trong URL hiện tại (ví dụ: ?myParam=foo).
5. Phần còn lại của mã chỉ trả về một thành phần React có thẻ h1 và p hiển thị giá trị của myParam trong chuỗi truy vấn URL (nếu nó tồn tại).

Bộ định tuyến phản ứng 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 một API để điều hướng ứng dụng, cho phép các nhà phát triển xác định tuyến đường một cách khai báo, hiển thị các thành phần dựa trên URL hiện tại và liên kết giữa các phần khác nhau của ứng dụng. Nó cũng hỗ trợ các tính năng như kết hợp tuyến đường động, theo dõi vị trí và bảo vệ điều hướng.

Làm cách nào để lấy chuỗi truy vấn trong bộ định tuyến phản ứng v6

v6

Trong React Router v6, bạn có thể truy cập các tham số chuỗi truy vấn bằng hook useLocation. Móc này trả về một đối tượng vị trí chứa thông tin về URL hiện tại bao gồm tên đường dẫn, tìm kiếm, hàm băm và thuộc tính trạng thái. Thuộc tính tìm kiếm chứa các tham số chuỗi truy vấn dưới dạng một chuỗi. Sau đó, bạn có thể phân tích cú pháp chuỗi này để nhận một đối tượng chứa tất cả các tham số chuỗi truy vấn.
Ví dụ:
const {tìm kiếm} = useLocation();
const params = URLSearchParams mới(tìm kiếm);
const param1 = params.get('param1');