تم الحل: تمرير البيانات في محفوظات جهاز التوجيه المتفاعل٪ 2Cpush

المشكلة الرئيسية المتعلقة بتمرير البيانات في سجل جهاز التوجيه التفاعلي ، الدفع هي أن البيانات لا تستمر عبر تحديثات الصفحة. عندما يقوم المستخدم بتحديث الصفحة ، ستفقد البيانات المخزنة في history.push ولن تكون متاحة للاستخدام في عمليات تحميل الصفحات اللاحقة. يمكن أن يؤدي هذا إلى سلوك غير متوقع ويمكن أن يتسبب في حدوث مشكلات عند محاولة الوصول إلى البيانات أو تخزينها من تحميل صفحة سابق.

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

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

  const handleClick = (data) => {
    history.push({ pathname: "/mypage", state: data });
  };

  return <button onClick={() => handleClick({ someData: "data" })}>Go</button>;
};

1. يستورد هذا السطر خطاف useHistory من مكتبة رد فعل جهاز التوجيه دوم ، والتي توفر الوصول إلى كائن المحفوظات الذي يتتبع الموقع الحالي في التطبيق.

2. يعلن هذا السطر عن مكون وظيفي يسمى MyComponent ويخصصه لمتغير ثابت.

3. يستخدم هذا السطر خطاف useHistory الذي تم استيراده في السطر الأول للوصول إلى كائن المحفوظات وتخصيصه لمتغير ثابت يسمى history.

4. يعلن هذا السطر عن وظيفة تسمى handleClick تأخذ وسيطة تسمى البيانات وتدفع كائنًا يحتوي على خصائص اسم المسار والحالة إلى مكدس المحفوظات باستخدام history.push ().

5. يقوم هذا السطر بإرجاع عنصر زر مع معالج حدث onClick الذي يستدعي handleClick () مع كائن يحتوي على بعض البيانات كمعامل عند نقر المستخدم عليه.

دفع التاريخ

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

كيف يمكنني استخدام المحفوظات في رد فعل جهاز التوجيه

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

لاستخدام السجل في React Router ، تحتاج إلى إنشاء كائن محفوظات باستخدام طريقة createHistory () من حزمة المحفوظات. سيمنحك هذا الوصول إلى طرق مثل push () و replace () و go (). تسمح لك هذه الطرق بمعالجة عنوان URL الخاص بالمتصفح والتنقل بين المسارات المختلفة في تطبيقك. يمكنك أيضًا استخدام طريقة listen () للاستماع إلى التغييرات في عنوان URL وتحديث تطبيقك وفقًا لذلك.

بمجرد إنشاء كائن محفوظات ، يمكنك تمريره إلى مكون جهاز التوجيه الخاص بك عند إنشائه. سيسمح ذلك لـ React Router بتتبع جميع التغييرات التي يقوم بها المستخدمون والتحديث وفقًا لذلك.

يسهل استخدام السجل مع React Router على المطورين إنشاء مكونات تنقل قوية يسهل على المستخدمين فهمها والتفاعل معها.