مشكلة routing في تطبيق باستخدام next.js

Ahmed Zehry · 5 مارس

بتاريخ 3 ساعة قال Ahmed Zehry:
لدي مشكلة في صفحة packages\worldpackages\[place]\[data]\index.js
كيف اجعله ياخذ المسار place من الصفحة القادم منها لان الطريقة التي قمت بها تجعله ياخذ
const programIds = programs.map((program) => program.id);
  const paths = programIds.map((id) => ({
    params: { place: id.toString() , data: id.toString() },
  }));
وهذا يجعل الصفحة التي تتطابق فيها معرف المكان بمعرف المعلومات فقط هي التي تظهر

w-n.rar

محمد عاطف17 · 5 مارس

مرحبا احمد .

للاسف لن يمكنك الحصول على المعامل place الذى فى المسار داخل الدالة getStaticPaths حيث ان هذه الدالة يتم تنفيذها قبل البناء اى انها لاتستطيع الوصول الى المسار الحالى . وساشرح لك اكثر عن طريقة عملها .

return {
  paths: [
    { params: { id: '1' }},
    {
      params: { id: '2' },
    },
  ],
  fallback: ...
}

لاحظ هنا قمنا بتعريف مسار يحتوى على id 1 و id 2 وبذلك فان next.js يقوم بحفظ هذه المسارات وبنائها اى انه داخليا قام بتخزين الصفحة التى تحتوى على id 1 و id 2 واذا ما كان المسار يحتوى على id سواهما سوف يقوم باظهار صفحة 404 .

وهكذا بعد ان علمنا كيف تعمل getStaticPaths لنحل المشكلة التى تواجهك سويا .

ان المنطق (logic) الذى تنفذه يوجد فيه بعض الاخطاء فيجب ربط الاماكن ب العروض ولكنك لم تقم بذلك .

فمن المفترض ان يحتوى الثابت programs لديك على خاصية تسمى place_id وتحتوى على ال id الخاص بالمكان وبذلك فى الدالة getStaticPaths تقوم بارجاعها مع ال id الخاص بال program وقد قمت بارفق الملف لك بعد التعديل .ولكن يجب عليك انت اضافت ال id على حسب البرنامج والمكان فانا قمت باضافت قيم عشوائية.

ناتى الان لتعديل الدالة getStaticPaths قم باستبدالها بهذا الكود بان تقوم باضافة ال place_id فى الثابت programs

export async function getStaticPaths() {
  
  const programIds = programs.map((program) => ({id:program.id,data:program.place_id}));
  const paths = programIds.map((program) => ({
    params: { place: program.id.toString() , data: program.data.toString() },
  }));

  return { paths, fallback: false };
}

ومن ثم يمكنك زيارة هذا المسار http://localhost:3000/packages/worldpackages/6/5 وسيعمل معك .