• 0

كيفية إضافة routes مع parameters في React - Gatsby؟

أريد أن أقوم بعمل route يحمل متغير خاص كالتالي:

/users/<userID>

في react router نقوم في العادة بإستخدام طريقة النقطتين كالتالي:

<Route exact path='/users/:userid' component={user} /> 

قمت بالإطلاع على موقع Gatsby الرسمي للقراءة حول Client only routes لكن لم أفهم كيف أقوم بعمل متغير يقبل أي قيمة بدون إعداد صفحة مخصصة لكل مستخدم يدويًا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0

غرض تمرير بيانات في المسار هو لجعل الصفحة تظهر بشكل ديناميكي غير ثابت , ولفعل هذا في مكتبة gatspy ستحتاج الواجهة createPage لبناء أي صفحات ديناميكية و متغيرة (مثل صفحات البروفايل أو صفحة المنتج أو المقالة و غيرها) , في حين أن كل الصفحات الثابتة تبنى و تصدر بطريقة عادية بداخل src/pages . 

مثال عملي : 

بداخل ملف gatsby-node.js نقوم بتصدير الثابت createPages على هذا النحو : 

export const createPages = ({ actions }) => {
  const { createPage } = actions;

  createPage({
    // تعريف المسار
    path: '/users/YOURID',
    
    // تعريف المكون المعاد في المسار
    component: YourRelatedComponent,

    // إرسال بيانات مخصصة للمكون 
    context: {
      userID: 'YOURID',
    },
    
  });
};

ثم يمكنك الوصول للبيانات الممررة بشكل عادي .  

إقرأ أكثر عن إنشاء و تعديل الصفحات في Gatspy  هنا

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن