แก้ไขแล้ว: รับแบบสอบถามจาก url react router dom v6

ปัญหาหลักที่เกี่ยวข้องกับการรับเคียวรีจาก URL React Router DOM v6 คือไม่มีวิธีในตัวในการเข้าถึงพารามิเตอร์เคียวรี นักพัฒนาซอฟต์แวร์ต้องแยกวิเคราะห์สตริง URL ด้วยตนเองและแตกพารามิเตอร์การค้นหาด้วยตนเอง นี่อาจเป็นกระบวนการที่น่าเบื่อและอาจนำไปสู่ข้อผิดพลาดหากทำไม่ถูกต้อง นอกจากนี้ หากโครงสร้าง URL เปลี่ยนไป โค้ดอาจต้องอัปเดตตามนั้น

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. “นำเข้า { useLocation } จาก 'react-router-dom'” – บรรทัดนี้นำเข้าตะขอ useLocation จากไลบรารี react-router-dom
2. “const MyComponent = () => {” – บรรทัดนี้ประกาศฟังก์ชันที่เรียกว่า MyComponent ซึ่งจะส่งคืนส่วนประกอบ React
3. “ตำแหน่ง const = useLocation();” – บรรทัดนี้ใช้ตะขอ useLocation ที่นำเข้าเพื่อรับข้อมูลเกี่ยวกับตำแหน่งปัจจุบันของแอปพลิเคชัน (เช่น URL)
4. “const queryParams = URLSearchParams ใหม่ (location.search);” – บรรทัดนี้สร้างวัตถุที่มีพารามิเตอร์การค้นหาทั้งหมดใน URL ปัจจุบัน (เช่น ?myParam=foo)
5. โค้ดที่เหลือเป็นเพียงการส่งคืนส่วนประกอบ React ด้วยแท็ก h1 และ p ที่แสดงค่าของ myParam ในสตริงการสืบค้น URL (ถ้ามี)

ตอบโต้เราเตอร์ Dom

React Router DOM เป็นไลบรารีการกำหนดเส้นทางสำหรับ React ที่ช่วยให้นักพัฒนาสามารถสร้างและจัดการเส้นทางภายในแอปพลิเคชัน React ของตนได้ มี API สำหรับการนำทางแอปพลิเคชัน ช่วยให้นักพัฒนาสามารถกำหนดเส้นทางอย่างเปิดเผย แสดงส่วนประกอบตาม URL ปัจจุบัน และเชื่อมโยงระหว่างส่วนต่าง ๆ ของแอปพลิเคชัน นอกจากนี้ยังรองรับคุณสมบัติต่างๆ เช่น การจับคู่เส้นทางแบบไดนามิก การติดตามตำแหน่ง และตัวป้องกันนำทาง

ฉันจะรับสตริงการสืบค้นในเราเตอร์ react v6 ได้อย่างไร

v6

ใน React Router v6 คุณสามารถเข้าถึงพารามิเตอร์สตริงการสืบค้นโดยใช้ตะขอ useLocation hook นี้ส่งคืนวัตถุตำแหน่งซึ่งมีข้อมูลเกี่ยวกับ URL ปัจจุบัน รวมถึงชื่อพาธ การค้นหา แฮช และคุณสมบัติสถานะ คุณสมบัติการค้นหามีพารามิเตอร์สตริงการสืบค้นเป็นสตริง จากนั้น คุณสามารถแยกวิเคราะห์สตริงนี้เพื่อรับวัตถุที่มีพารามิเตอร์สตริงข้อความค้นหาทั้งหมด
ตัวอย่างเช่น:
const {ค้นหา} = useLocation();
const params = URLSearchParams ใหม่ (ค้นหา);
const param1 = params.get ('param1');