في Next.js App Router، حدد URL فقط لعرض page.tsx على الخادم واسحبه إلى pane جديد في FlexLayoutSplitScreen.

v1.0.0

تكون هذه الصفحة نفسها هدف اختبار Server Component.

يتولى FlexLayout العادي مسؤولية التخطيط وإعادة الحجم كما هو معتاد، بينما يتولى FlexLayoutSplitScreen تقسيم الديناميكي. يتم تفسير نقطة الدخول الخاصة بـ Next.js URL من خلال DragBox كـ registry تم إنشاؤه، ثم يتم تقديم page.tsx على الخادم، ويتم تمرير النتيجة إلى pane المقسم المعني.

1. إنشاء Registry

text

قم فقط بتعيين مسار التطبيق ومسار الإخراج في الجزء العلوي من نص المشروع. تكون النتيجة الناتجة registry ثابتة يمكنها تفسير مجموعة المسارات والقطاعات الديناميكية.

قم فقط بتعيين مسار التطبيق ومسار الإخراج في الجزء العلوي من سكريبت المشروع المستخدم. تكون النتائج الناتجة سجل استيراد ثابت يمكنه تفسير مجموعة المسار والجزء الديناميكي، والصادرات الافتراضية هي FlexLayoutNextSplitScreen.

scripts/generateFlexLayoutSplitScreenPageRegistry.mjs

2. تطبيق FlexLayoutNextSplitScreen

FlexLayoutNextSplitScreen هو غلاف مخصص لـ Next.js يوفر تقديم الخادم لجزء URL باستخدام سجل الصفحات الذي تم إنشاؤه. يجب لف شجرة FlexLayoutSplitScreen التي ستستقبل جزء URL مرة واحدة.

tsx

3. استعادة تحديث جزء URL

الهدف من الاستعادة هو جزء URL من Next يمكن إعادة إنشائه فقط.

يتم تضمينها في لقطة دائمة فقط إذا كانت محاطة بـ FlexLayoutNextSplitScreen، وكان DragBox مخصصًا لـ Next.js، وكان أسلوب url، ولم يتم تحديد targetComponent مباشرة، ولا تستخدم iframe.

عند تحديد persistence، يتم تخزين بيانات التعريف القابلة للتسلسل فقط مثل URL وscreenKey وcontainerName وnavigationTitle في التخزين، وليس ReactElement نفسه. إذا كانت restoreOnReload غير صحيحة، فلن يتم استخدام persistence، وإذا كانت syncWithBrowserUrl صحيحة، يتم تخزين لقطة URL لكل من pathname + search. عند العودة للأمام أو للخلف أو إعادة زيارة نفس URL، يتم استعادة الحالة الكاملة المستندة إلى URL، ويتم استعادة لقطة URL الحالية عند التحديث.

tsx

4. يتم تمرير URL فقط إلى DragBox

DragBox المخصص لـ Next.js يستقبل URL فقط دون الحاجة لإنشاء targetComponent مباشرة. إذا تم تحديد targetComponent، فإن الطريقة القديمة تأخذ الأولوية، ويتم استبعاد هذا اللوح من أهداف persistence.

tsx

5. iframe اختياري

القيمة الافتراضية لـ iframe هي false. يتم تعيين iframe على true فقط عند الحاجة إلى URL خارجي أو سياق مستند مستقل. وضع iframe لا يحتاج إلى سجل صفحات FlexLayoutNextSplitScreen، ويتم استبعاده أيضًا من أهداف persistence.

tsx

يتم تمرير params وsearchParams المستخرجة من URL إلى صفحة الخادم. ومع ذلك، فإن pane المقسم ليس موجه Next منفصل، لذا فإن usePathname وuseParams وuseSearchParams في Client Component الداخلي تعمل بناءً على URL الفعلي في المتصفح.

Current version