נפתרה: קבל שאילתה מ-url react router dom v6

הבעיה העיקרית הקשורה בקבלת שאילתה מ-URL React Router DOM v6 היא שהוא אינו מספק דרך מובנית לגשת לפרמטרי השאילתה. במקום זאת, מפתחים חייבים לנתח באופן ידני את מחרוזת כתובת האתר ולחלץ את פרמטרי השאילתה בעצמם. זה יכול להיות תהליך מייגע ועלול להוביל לשגיאות אם לא נעשה נכון. בנוסף, אם מבנה כתובת האתר משתנה, ייתכן שיהיה צורך לעדכן את הקוד בהתאם.

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 location = useLocation();" – שורה זו משתמשת ב-UseLocation המיובא להוק כדי לקבל מידע על המיקום הנוכחי של האפליקציה (למשל, כתובת URL).
4. "const queryParams = new URLSearchParams(location.search);" – שורה זו יוצרת אובייקט המכיל את כל פרמטרי השאילתה בכתובת האתר הנוכחית (למשל, ?myParam=foo).
5. שאר הקוד רק מחזיר רכיב React עם תגית h1 ו-p שמציגה את הערך של myParam במחרוזת שאילתת ה-URL (אם היא קיימת).

נתב תגובה Dom

React Router DOM היא ספריית ניתוב עבור React המאפשרת למפתחים ליצור ולנהל מסלולים בתוך יישומי React שלהם. הוא מספק API לניווט באפליקציה, המאפשר למפתחים להגדיר באופן הצהרתי מסלולים, לעבד רכיבים על סמך כתובת האתר הנוכחית ולקשר בין חלקים שונים של האפליקציה. הוא תומך גם בתכונות כגון התאמת מסלול דינמי, מעקב אחר מיקום ושומרי ניווט.

איך אני מקבל את מחרוזת השאילתה בנתב react v6

v6

ב-React Router v6, אתה יכול לגשת לפרמטרים של מחרוזת השאילתה באמצעות ה-useLocation. הוק זה מחזיר אובייקט מיקום המכיל מידע על כתובת האתר הנוכחית, כולל שם נתיב, חיפוש, גיבוב ומאפייני מצב. מאפיין החיפוש מכיל את הפרמטרים של מחרוזת השאילתה כמחרוזת. לאחר מכן תוכל לנתח מחרוזת זו כדי לקבל אובייקט המכיל את כל הפרמטרים של מחרוזת השאילתה.
לדוגמה:
const {חיפוש} = useLocation();
const params = new URLSearchParams(search);
const param1 = params.get('param1');