القراء مثلك يساعدون في دعم MUO. عند إجراء عملية شراء باستخدام الروابط الموجودة على موقعنا ، فقد نربح عمولة تابعة. اقرأ أكثر.

تطبيق الصفحة الواحدة (SPA) هو موقع ويب أو تطبيق ويب يقوم ديناميكيًا بإعادة كتابة صفحة ويب موجودة بمعلومات جديدة من خادم الويب.

في تطبيق React ، تقوم المكونات باسترداد محتوى الموقع وتقديمه إلى ملف HTML واحد في مشروعك.

يساعدك جهاز React Router على الانتقال إلى المكون الذي تختاره وعرضه في ملف HTML. لاستخدامه ، تحتاج إلى معرفة كيفية إعداد React Router ودمجها مع تطبيق React الخاص بك.

كيفية تثبيت React Router

لتثبيت React Router في مشروع React الخاص بك باستخدام npm ، مدير حزم JavaScript ، قم بتشغيل الأمر التالي في دليل المشروع الخاص بك:

npm أنا رد فعل جهاز التوجيه دوم

بدلاً من ذلك ، يمكنك تنزيل الحزمة باستخدام Yarn ، وهو مدير الحزم الذي يسمح لك بتثبيت حزم المكتبة في وضع عدم الاتصال.

لتثبيت React Router باستخدام Yarn ، قم بتشغيل هذا الأمر:

إضافة الغزل إلى جهاز التوجيه التفاعلي dom @ 6

إعداد جهاز التوجيه React

لتكوين جهاز React Router وإتاحته في تطبيقك ، قم باستيراد المستعرض من رد فعل جهاز التوجيه دوم داخل index.js ملف ، ثم لف مكون التطبيق في ملف المستعرض عنصر:

instagram viewer 
يستورد تتفاعل من'تتفاعل';
يستورد رد فعل من"رد فعل دوم / العميل"; 
يستورد برنامج من'./برنامج';
يستورد {BrowserRouter} من"رد فعل جهاز التوجيه دوم";
مقدار ثابت الجذر = ReactDOM.createRoot ( وثيقة.getElementById ('جذر') );
root.render (


 </BrowserRouter>
);

التفاف مكوّن التطبيق في ملف المستعرض عنصر يمنح التطبيق بالكامل وصولاً كاملاً إلى قدرات جهاز التوجيه.

التوجيه إلى المكونات الأخرى

بعد إعداد جهاز التوجيه الخاص بك في التطبيق الخاص بك ، يجب عليك المضي قدمًا وإنشاء مكونات التطبيق الخاص بك ، وتوجيهها ، وعرضها. تقوم الكود التالي باستيراد وإنشاء مكونات تسمى "Home" و "About" و "Blog". كما أنها تستورد ملف طريق و طرق عناصر من رد فعل جهاز التوجيه دوم.

ستحدد مساراتك داخل ملف برنامج عنصر:

يستورد {المسارات ، المسار} من"رد فعل جهاز التوجيه دوم";
يستورد بيت من'./بيت';
يستورد عن من'./عن';
يستورد مدونة من'./مدونة';
وظيفةبرنامج() {
يعود (

'/' العنصر = { } />
'/عن' العنصر = { } />
'/مدونة' العنصر = { }/>
 </Routes>
 )
}


يصدّرتقصير برنامج؛

ال برنامج المكون هو المكون الرئيسي الذي يعرض جميع التعليمات البرمجية التي كتبتها في مكوناتك الأخرى.

ال طرق العنصر هو العنصر الأصلي الذي يلف المسارات الفردية التي تنشئها في مكون التطبيق الخاص بك. ال طريق عنصر يُنشئ مسارًا واحدًا. تأخذ سمتين للدعم: أ طريق و عنصر.

ال طريق تحدد السمة مسار URL للمكون المقصود. يستخدم المسار الأول في كتلة التعليمات البرمجية أعلاه شرطة مائلة للخلف (/) كمسار له. هذا مسار خاص ستعرضه React أولاً ، لذا فإن ملف بيت يتم عرض المكون عند تشغيل التطبيق الخاص بك. لا تخلط بين هذا النظام و تنفيذ التصيير الشرطي في مكونات React الخاصة بك. يمكنك ان تعطي هذا طريق أن تنسب أي اسم تريده.

ال عنصر السمة تحدد المكون الذي طريق سوف تقدم.

ال وصلة المكون هو مكون React Router يستخدم للتنقل في طرق مختلفة. تصل هذه المكونات إلى المسارات المختلفة التي قمت بإنشائها.

على سبيل المثال:

يستورد { وصلة } من"رد فعل جهاز التوجيه دوم";
وظيفةبيت() {
يعود (




'/عن'> حول الصفحة </Link>
'/مدونة'> صفحة المدونة </Link>
هذه هي الصفحة الرئيسية
 </div>
 )
}


يصدّرتقصير بيت؛

ال وصلة المكون مطابق تقريبًا لعلامة ربط HTML ، يستخدم فقط سمة تسمى "إلى" بدلاً من "href". ال وصلة يتنقل المكون إلى المسار باستخدام اسم المسار المقابل كسمة له ويعرض مكون المسار.

التوجيه المتداخل وكيفية تنفيذه

يدعم جهاز التوجيه React التوجيه المتداخل ، مما يسمح لك بلف مسارات متعددة في مسار واحد. يستخدم هذا بشكل أساسي عندما يكون هناك بعض التشابه في مسارات URL للطرق.

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

على سبيل المثال:

يستورد {المسارات ، المسار} من"رد فعل جهاز التوجيه دوم"; 
يستورد مقالات من'./مقالات';
يستورد مقال جديد من"./NewArticle";
يستورد المادة الأولى من"./ArticleOne";
وظيفةبرنامج() {
يعود (

'/شرط' العنصر = { }/>
"/ مقالة / جديد" العنصر = { }/>
'/ مقالة / 1' العنصر = { }/>
 </Routes>
 )
}
يصدّرتقصير برنامج؛

تستورد كتلة الكود أعلاه وتوجه المكونات التي تم إنشاؤها مقالات, مقال جديد، و المادة الأولى. توجد بعض أوجه التشابه في مسارات URL بين المسارات الثلاثة.

ال مقال جديد يبدأ اسم مسار المسار بنفس اسم مقالات اسم مسار المسار ، مع شرطة مائلة للخلف (/) وكلمة "جديد" ، أي (/ جديد). الاختلاف الوحيد بين أسماء مسار ملف مقالات الطريق و المادة الأولى المسار هو الشرطة المائلة (/ 1) في نهاية ملف المادة الأولى اسم مسار المكون.

يمكنك تداخل المسارات الثلاثة بدلاً من تركها في حالتها الحالية.

مثل ذلك:

يستورد {المسارات ، المسار} من"رد فعل جهاز التوجيه دوم";
يستورد مقالات من'./مقالات';
يستورد مقال جديد من"./NewArticle";
يستورد المادة الأولى من"./ArticleOne";
وظيفةبرنامج() {
يعود (

'/شرط'>
 }/>
"/ مقالة / جديد" العنصر = { }/>
'/ مقالة / 1' العنصر = { }/>
 </Route>
 </Routes>
 )
}
يصدّرتقصير برنامج؛

لقد قمت بلف المسارات الفردية الثلاثة في ملف واحد طريق عنصر. لاحظ أن الوالد طريق العنصر فقط طريق السمة ولا عنصر السمة التي تحدد المكون المطلوب عرضه. ال فِهرِس السمة في الطفل الأول طريق عنصر يحدد أن هذا طريق يتم عرضه عند الانتقال إلى مسار URL الخاص بالأصل طريق.

لجعل شفرتك أفضل وأكثر قابلية للصيانة ، يجب عليك تحديد مساراتك في أحد المكونات واستيرادها إلى ملف برنامج مكون للاستخدام.

على سبيل المثال:

يستورد {المسارات ، المسار} من"رد فعل جهاز التوجيه دوم";
يستورد مقالات من'./مقالات';
يستورد مقال جديد من"./NewArticle";
يستورد المادة الأولى من"./ArticleOne";
وظيفةالمادة() {
يعود (

 }/>
"/ مقالة / جديد" العنصر = { }/>
'/ مقالة / 1' العنصر = { }/>
 </Routes>
 )
}
يصدّرتقصير المادة

يحتوي المكون الموجود في كتلة التعليمات البرمجية أعلاه على المسارات المتداخلة التي كانت موجودة سابقًا في مكون التطبيق. بعد إنشاء المكون ، يجب عليك استيراده إلى ملف برنامج المكون وتوجيهه باستخدام ملف طريق عنصر.

على سبيل المثال:

يستورد {المسارات ، المسار} من"رد فعل جهاز التوجيه دوم";
يستورد المادة من"./ArticleRoutes";
وظيفةبرنامج() {
يعود (

'/شرط/*' العنصر = { }>
 </Routes>
 )
}
يصدّرتقصير برنامج؛

في النهاية طريق المكون ، المائل الخلفي ورموز العلامة النجمية المضافة في نهاية اسم المسار للمسار تضمن أن اسم المسار يتوافق مع أي اسم مسار يبدأ بـ (/شرط).

هناك المزيد من React Router

يجب أن تكون الآن على دراية بأساسيات كيفية إنشاء تطبيقات ذات صفحة واحدة في React.js ، باستخدام React Router.

هناك العديد من الميزات المتوفرة في مكتبة React Router والتي تجعل تجربة المطور أكثر ديناميكية عند إنشاء تطبيقات الويب.