تم الحل: احصل على استعلام من عنوان url رد فعل جهاز التوجيه 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} من" رد فعل جهاز التوجيه-dom "؛" - يقوم هذا الخط باستيراد الخطاف useLocation من مكتبة React-router-dom.
2. “const MyComponent = () => {” - يعلن هذا السطر عن وظيفة تسمى MyComponent والتي ستعيد مكون React.
3. “const location = useLocation ()؛” - يستخدم هذا الخط ربط useLocation الذي تم استيراده للحصول على معلومات حول الموقع الحالي للتطبيق (على سبيل المثال ، URL).
4. “const queryParams = new URLSearchParams (location.search) ؛” - يُنشئ هذا السطر كائنًا يحتوي على جميع معاملات الاستعلام في عنوان URL الحالي (على سبيل المثال ،؟ myParam = foo).
5. يقوم باقي الكود بإرجاع مكون React بعلامة h1 و p التي تعرض قيمة myParam في سلسلة استعلام URL (إن وجدت).

رد جهاز التوجيه Dom

React Router DOM هي مكتبة توجيه لـ React تسمح للمطورين بإنشاء وإدارة المسارات داخل تطبيقات React الخاصة بهم. يوفر واجهة برمجة تطبيقات للتنقل في التطبيق ، مما يسمح للمطورين بتحديد المسارات بشكل تصريحي ، وتقديم المكونات بناءً على عنوان URL الحالي ، والربط بين أجزاء مختلفة من التطبيق. كما أنه يدعم ميزات مثل مطابقة المسار الديناميكي وتتبع الموقع وحراس التنقل.

كيف أحصل على سلسلة الاستعلام في جهاز التوجيه التفاعلي v6

v6

في React Router v6 ، يمكنك الوصول إلى معلمات سلسلة الاستعلام باستخدام الخطاف useLocation. يقوم هذا الخطاف بإرجاع كائن موقع يحتوي على معلومات حول عنوان URL الحالي بما في ذلك خصائص اسم المسار والبحث والتجزئة والحالة. تحتوي خاصية البحث على معلمات سلسلة الاستعلام كسلسلة. يمكنك بعد ذلك تحليل هذه السلسلة للحصول على كائن يحتوي على جميع معلمات سلسلة الاستعلام.
فمثلا:
const {search} = useLocation () ،
معلمات const = URLSearchParams الجديد (بحث) ؛
const param1 = params.get ('param1') ؛