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

Adam Ebrahim · 11 مايو 2021

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

/users/<userID>

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

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

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

Adnane Kadri · 11 مايو 2021

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

مثال عملي :

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

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

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

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