React Router هي مكتبة قياسية للتوجيه في React. فهو يتيح التنقل بين طرق العرض من مكونات مختلفة في تطبيق React، ويسمح بتغيير عنوان URL للمتصفح، ويحافظ على مزامنة واجهة المستخدم مع عنوان URL.
لفهم كيفية عمل React Router، دعونا ننشئ تطبيقًا بسيطًا لـ React. سيتضمن التطبيق مكونات المنزل والتفاصيل والاتصال. سنستخدم React Router للتنقل بين هذه المكونات.
npx إنشاء تطبيق رد الفعل
بيئة التطوير الخاصة بك جاهزة. لنقم الآن بتثبيت React Router في تطبيقنا.
رد فعل جهاز التوجيه : يمكن تثبيت React Router في تطبيق React الخاص بك عبر npm. اتبع الخطوات أدناه لإعداد جهاز التوجيه في تطبيق React الخاص بك:
الخطوة 1: قرص مضغوط في دليل المشروع الخاص بك، على سبيل المثال .جافا.
الخطوة 2: استخدم الأمر التالي لتثبيت React Router:
نموذج TCP IP
تثبيت npm - -حفظ رد فعل جهاز التوجيه dom
بعد تثبيت React-router-dom، قم بإضافة مكوناته إلى تطبيق React الخاص بك.
إضافة مكونات جهاز التوجيه React:
المكونات الرئيسية لجهاز React Router هي:
بدلاً من العبور بالتسلسل، يتم تحديد المسارات بناءً على أفضل تطابق.
لإضافة مكونات React Router إلى تطبيقك، افتح دليل مشروعك في المحرر الذي تستخدمه وانتقل إلى ملف app.js. الآن، قم بإضافة الكود أدناه إلى app.js.
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom'; ملاحظة: BrowserRouter هو الاسم المستعار لجهاز التوجيه.
استخدام جهاز التوجيه React: لاستخدام React Router، لنقم أولاً بإنشاء بعض المكونات في تطبيق React. في دليل مشروعك، أنشئ مجلدًا باسم المكونات داخل مجلد src وأضف الآن 3 ملفات باسم home.js وabout.js وcontact.js في مجلد المكونات.
دعونا نضيف بعض التعليمات البرمجية إلى مكوناتنا الثلاثة:
Home.js:
import React from 'react'; function Home (){ return } export default Home; حول.js:
import React from 'react'; function About () { return <h2> jAVAtPOINT is a computer science portal for TUTORIALS!</h2> Read more about us at : <a href="https://www.javatpoint.in/about/"> https://www.javatpoint.in/about/ </a> } export default About; جهة الاتصال.js:
import React from 'react'; function Contact (){ return You can find us here: <br> Javatpoint <br> G-13, second floor, Sector -3 Noida <br> Noida, Uttar Pradesh (201305) } export default Contact; الآن، دعونا نقوم بتضمين مكونات React Router في التطبيق:
BrowserRouter : قم بإضافة BrowserRouter ذو الاسم المستعار كموجه إلى ملف app.js الخاص بك لتغليف جميع المكونات الأخرى. يعد BrowserRouter مكونًا أصليًا ويمكن أن يحتوي على فرع واحد فقط.
class App extends Component { render() { return ( ); } } الروابط: دعونا الآن إنشاء روابط مكوناتنا. يستخدم مكون الارتباط الدعائم لوصف الموقع الذي يجب أن ينتقل إليه الرابط.
15 من 100.00
<ul> <li> Home </li> <li> About Us </li> <li> Contact Us </li> </ul>
الآن، قم بتشغيل التطبيق الخاص بك على المضيف المحلي وانقر على الرابط الذي تم إنشاؤه. ستلاحظ أن عناوين URL تتغير وفقًا لقيمة مكون الارتباط.
طريق : سيساعدنا مكون المسار في إنشاء الرابط بين واجهة المستخدم الخاصة بالمكون وعنوان URL. لتضمين المسار في التطبيق، قم بإضافة الكود أدناه إلى app.js الخاص بك.
<route exact path="/" element="{}"> <route exact path="/about" element="{}"> <route exact path="/contact" element="{}"> </route></route></route> المكونات متصلة الآن، وسيؤدي النقر على أي رابط إلى عرض المكون المقابل. دعونا نحاول الآن فهم الدعائم المرتبطة بالمكون الجذر.
- يشير العنصر إلى المكون الذي سيتم عرضه في حالة تطابق المسار.
ملاحظة: بشكل افتراضي، تكون المسارات شاملة، مما يعني أن أكثر من مكون مسار يمكن أن يتطابق مع مسار URL ويتم عرضه في وقت واحد. إذا أردنا تقديم مكون واحد، نحتاج إلى استخدام المسارات هنا.
الطرق : لقراءة مكون واحد، قم بتغليف جميع المسارات داخل مكون الطرق.
<route exact path="/" element="{}"> <route exact path="/about" element="{}"> <route exact path="/contact" element="{}"> </route></route></route> قم بتبديل المجموعات عبر مسارات متعددة، وكررها وابحث عن أول مجموعة تتطابق مع المسار. وبالتالي، يتم تقديم المكون المقابل للمسار.
إليك كود المصدر الكامل الخاص بنا بعد إضافة جميع المكونات:
import React, { Component } from 'react'; import { BrowserRouter as Router,Routes, Route, Link } from 'react-router-dom'; import Home from './component/home'; import Contact from './component/contact'; import About from './component/about'; import './App.css'; class App extends Component { render() { return ( <ul classname="App-header"> <li> Home </li> <li> About Us </li> <li> Contact Us </li> </ul> <route exact path="/" element="{}"> <route exact path="/about" element="{}"> <route exact path="/contact" element="{}"> ); } } export default App; </route></route></route> الآن، يمكنك النقر على الرابط والتنقل بين المكونات المختلفة. يحافظ React Router على مزامنة واجهة مستخدم التطبيق مع عنوان URL.
أخيرًا، نجحنا في تنفيذ التنقل في تطبيق React الخاص بنا باستخدام React Router.
A يستخدم واجهة برمجة تطبيقات محفوظات HTML5 (أحداث Pushstate، وreplacestate، وpopstate) للحفاظ على مزامنة واجهة المستخدم الخاصة بك مع عنوان URL.
الاسم الأساسي: سلسلة
عنوان URL الأساسي لجميع المواقع. إذا تم تقديم تطبيقك من دليل فرعي على الخادم الخاص بك، فستحتاج إلى تعيينه على هذا الدليل الفرعي. يجب أن يحتوي الاسم الأساسي المنسق بشكل صحيح على شرطة مائلة بادئة، ولكن بدون شرطة مائلة لاحقة.
// renders // renders <a href="tmp//calendar/tomorrow"> ... </a>
تأكيد المستخدم: func
وظيفة تستخدم لتأكيد التنقل. الإعدادات الافتراضية لاستخدام window.confirm.
{ // this is the default behavior const allowTransition = window.confirm(message); callback(allowTransition); }} /> تحديث القوة: منطقي
إذا كان هذا صحيحًا، فسيستخدم جهاز التوجيه تحديثات الصفحة الكاملة للتنقل على الصفحة. قد ترغب في استخدام هذا لتقليد كيفية عمل التطبيق التقليدي الذي يعرضه الخادم مع تحديثات الصفحة الكاملة بين التنقل بين الصفحات.
طول المفتاح: الرقم
طول المكان . مفتاح. الافتراضي إلى 6.
الأطفال: العقدة- عنصر فرعي لتقديمه.
ملاحظة: في React، يجب عليك استخدام عنصر فرعي واحد لأن التابع render لا يمكنه إرجاع أكثر من عنصر واحد. إذا كنت بحاجة إلى أكثر من عنصر واحد، يمكنك محاولة تغليفها في ملف إضافي أو .
يستخدم جزء التجزئة من عنوان URL (أي window.location.hash) للحفاظ على مزامنة واجهة المستخدم الخاصة بك مع عنوان URL.
أنماط تصميم جافا
ملاحظة: التجزئة لا تدعم موقع السجل. المفتاح أو الموقع. ولاية. في الإصدارات السابقة، حاولنا تقليل السلوك، ولكن كانت هناك حالات حافة لم نتمكن من حلها. لن يعمل أي كود أو مكون إضافي يتطلب هذا السلوك.
وبما أن هذه التقنية تهدف إلى دعم المتصفحات القديمة فقط، فإننا نشجعك على تكوين الخادم الخاص بك للعمل معه بدلاً من ذلك.
الاسم الأساسي: سلسلة
عنوان URL الأساسي لجميع المواقع. يجب أن يحتوي الاسم الأساسي المنسق بشكل صحيح على شرطة مائلة بادئة، ولكن بدون شرطة مائلة لاحقة.
// renders <a href="#/calendar/today"> </a>
تأكيد المستخدم: func
وظيفة تستخدم لتأكيد التنقل. الإعدادات الافتراضية لاستخدام window.confirm.
{ // this is the default behavior const allowTransition = window.confirm(message); callback(allowTransition); }} /> نوع التجزئة: سلسلة
الترميز المستخدم ل window.location.hash . القيم المتاحة هي:
- 'slash' - ينشئ تجزئات مثل #/ و#/sunshine/lollipops
- 'noslash' - # و #sunshine/lollipops . كما يخلق التجزئة
- 'hashbang' - ينشئ تجزئة 'ajax قابلة للزحف' (تم إهمالها بواسطة Google) مثل #!/ و#!/sunshine/lollipops
الإعدادات الافتراضية هي 'القطع المائل'.
الأطفال: العقدة
عنصر فرعي واحد لتقديمه.
يوفر التنقل التعريفي ويمكن الوصول إليه حول التطبيق الخاص بك.
About
إلى سلسلة
يتم إنشاء تمثيل سلسلة لموقع الارتباط من خلال الجمع بين اسم مسار الموقع والبحث وخصائص التجزئة.
كائن يمكن أن يحتوي على أي من الخصائص التالية:
إلى: وظيفة
دالة يتم فيها تمرير الموقع الحالي كوسيطة ويجب أن تُرجع تمثيل الموقع كسلسلة أو كائن.
({ ...location, pathname: '/courses' })} /> `${location.pathname}?sort=name`} /> استبدال: منطقي
عندما يكون هذا صحيحًا، سيؤدي النقر فوق الرابط إلى استبدال الإدخال الحالي بدلاً من إضافة إدخال جديد
entry to the history stack.
المرجع الداخلي: func
اعتبارًا من React Router 5.1، إذا كنت تستخدم React 16، فلن تحتاج إلى هذه الدعامة بينما نعيد توجيه المرجع إلى المصدر الأساسي . استخدم المرجع العادي بدلا من ذلك.
يسمح بالوصول إلى المرجع المدمج في المكون.
الصورة كخلفية في CSS
{ // `node` refers to the mounted DOM element // or null when unmounted }} /> المرجع الداخلي: RefObject
اعتبارًا من React Router 5.1، إذا كنت تستخدم React 16، فلن تحتاج إلى هذه الدعامة لأننا نعيد توجيه المرجع إلى المصدر الأساسي . استخدم المرجع العادي بدلا من ذلك.
احصل على المرجع الأساسي للمكون باستخدام React.createRef.
let anchorRef = React.createRef()
المكون: React.Component
إذا كنت ترغب في استخدام مكون التنقل الخاص بك، فيمكنك القيام بذلك عن طريق تمريره عبر خاصية المكون.
قوائم جافا
const FancyLink = React.forwardRef(({ navigate, ...props }, ref) => { return ( <a ref="{ref}" {...props} onclick="{handleClick}">💅 {props.children} ) }) </a> يمكنك أيضًا تمرير الدعائم التي ترغب في أن تكون عليها مثل العنوان والمعرف واسم الفئة وما إلى ذلك.
سيضيف إصدار خاص من ذلك سمات التصميم إلى العنصر المعروض إذا كان يتطابق مع عنوان URL موجود.
About
اسم الفئة: سلسلة | func
يمكن أن يكون className سلسلة أو دالة تُرجع سلسلة. إذا تم استخدام الدالة className، فسيتم تمرير الحالة النشطة للارتباط كمعلمة. يعد هذا مفيدًا إذا كنت تريد تطبيق className حصريًا على رابط غير نشط.
'nav-link' + (!isActive ? ' unselected' : '') } >
الأسئلة الشائعة
في React Router v6، ستتم إزالة activeClassName ويجب عليك استخدام الدالة className لتطبيق اسم الفئة على مكونات NavLink النشطة أو غير النشطة.
اسم الفئة النشطة: سلسلة
فئة لإعطاء العنصر عندما يكون نشطا. الفئة الافتراضية المحددة نشطة. سيتم دمجه مع دعامة اسم الفئة.
النمط: كائن | func
يمكن أن يكون النمط إما كائن React.CSSProperties أو دالة تُرجع كائن نمط. إذا تم استخدام نمط الوظيفة، فسيتم تمرير الحالة النشطة للارتباط كمعلمة.
({ color: isActive ? 'green' : 'blue' })} > في React Router v6، ستتم إزالة النمط النشط، ويجب عليك استخدام نمط الوظيفة لتطبيق الأنماط المضمنة على مكونات NavLink النشطة أو غير النشطة.
النمط النشط: كائن
الأنماط المطبقة على العنصر عندما يكون نشطًا.
<navlink to="/faq" activestyle="{{" fontweight: 'bold', color: 'red' }} < pre> <h3>exact: bool</h3> <p>When true, the active class/style will only apply if the location is an exact match.</p> <pre> Profile </pre> <h3>strict: bool</h3> <p>If true, the trailing slash on a location's pathname will be considered when determining whether the location matches the current URL. See the documentation for more details.</p> <pre> Events </pre> <h3>isActive: func</h3> <p>A function to add additional logic to determine if the Link is active. This should be used when you want to do more than verify that the pathname of the Link matches the pathname of the current URL.</p> <pre> { if (!match) { return false; } // only consider an event active if its event id is an odd number const eventID = parseInt(match.params.eventID); return !isNaN(eventID) && eventID % 2 === 1; }} > Event 123 </pre> <h3>location: object</h3> <p>isActive Compares to the current history location (usually the current browser URL).</p> <h3>aria-current: string</h3> <p> <strong>The value of the area-current attribute used on the active Link. Available values are:</strong> </p> <ul> <li>'page' - used to indicate a link within a set of pagination links</li> <li>'Steps' - used to indicate a link within the step indicator for a step-based process</li> <li>'location' - used to indicate an image that is visually highlighted as the current component of the flow chart</li> <li>'date' - used to indicate the current date within the calendar</li> <li>'time' - used to indicate the current time within a timetable</li> <li>'true' - used to indicate whether NavLink is active</li> <li>'false' - used to prevent assistive technologies from reacting to the current Link (one use case would be to prevent multiple area-current tags on a page)</li> </ul> <hr></navlink> صارم: بول
إذا كان هذا صحيحًا، فسيتم أخذ الشرطة المائلة اللاحقة على اسم مسار الموقع في الاعتبار عند تحديد ما إذا كان الموقع يطابق عنوان URL الحالي. راجع الوثائق لمزيد من التفاصيل.
Events
نشط: func
وظيفة لإضافة منطق إضافي لتحديد ما إذا كان الارتباط نشطًا. يجب استخدام هذا عندما تريد القيام بأكثر من مجرد التحقق من أن اسم مسار الارتباط يطابق اسم مسار عنوان URL الحالي.
{ if (!match) { return false; } // only consider an event active if its event id is an odd number const eventID = parseInt(match.params.eventID); return !isNaN(eventID) && eventID % 2 === 1; }} > Event 123 الموقع: كائن
isActive يقارن بموقع السجل الحالي (عادةً ما يكون عنوان URL الحالي للمتصفح).
الأغنية الحالية: سلسلة
قيمة السمة الحالية للمنطقة المستخدمة في الارتباط النشط. القيم المتاحة هي:
- 'الصفحة' - تستخدم للإشارة إلى رابط ضمن مجموعة من روابط ترقيم الصفحات
- 'الخطوات' - تُستخدم للإشارة إلى رابط داخل مؤشر الخطوة لعملية قائمة على الخطوات
- 'الموقع' - يستخدم للإشارة إلى الصورة التي تم تمييزها بصريًا باعتبارها المكون الحالي للمخطط الانسيابي
- 'التاريخ' - يستخدم للإشارة إلى التاريخ الحالي داخل التقويم
- 'الوقت' - يستخدم للإشارة إلى الوقت الحالي ضمن جدول زمني
- 'صحيح' - يُستخدم للإشارة إلى ما إذا كان NavLink نشطًا أم لا
- 'خطأ' - يُستخدم لمنع التقنيات المساعدة من التفاعل مع الارتباط الحالي (حالة استخدام واحدة تتمثل في منع علامات المنطقة الحالية المتعددة على الصفحة)