تم حلها: تمرير البيانات ، انتقل إلى رد فعل جهاز التوجيه dom

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

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

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

  const handleClick = (data) => {
    history.push({ pathname: '/myroute', state: data }); // pass data to route as state object
  };

  return (
    <button onClick={() => handleClick(data)}>Go to MyRoute</button>
  );
};

// السطر 1: هذا الخط يستورد الخطاف useHistory من مكتبة رد فعل جهاز التوجيه دوم.
// السطر 3: يعلن هذا السطر عن ثابت يسمى MyComponent وهي دالة تقوم بإرجاع JSX.
// السطر 4: يعلن هذا السطر عن ثابت يسمى السجل الذي يتم تعيينه لخطاف useHistory الذي تم استيراده من رد فعل جهاز التوجيه دوم.
// السطر 6: يعلن هذا السطر عن وظيفة تسمى handleClick تأخذ معلمة واحدة وهي البيانات.
// السطر 7: يستخدم هذا السطر كائن المحفوظات لدفع مسار جديد إلى المكدس باستخدام اسم المسار '/ myroute' وتمرير بيانات الحالة ككائن.
// السطور 9 - 11: ترجع هذه السطور JSX التي تحتوي على عنصر زر مع معالج حدث onClick الذي يستدعي handleClick ويمرر البيانات كوسيطة.

رد فعل راوتر دوم

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

كيف يمكنك تمرير البيانات من خلال التنقل في رد فعل جهاز التوجيه Dom

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

const {history} = this.props؛
history.push ({
اسم المسار: '/ بعض / مسار' ،
الحالة: {someData: 'data'}
})؛