كيفية إنشاء فتات الخبز في React.js

هل سبق لك أن لاحظت تلك الأجزاء الصغيرة من النص في بعض مواقع الويب التي تشير إلى موقعك الحالي داخل الموقع؟ تسمى هذه مسارات التنقل ، ويمكن أن تكون طريقة مفيدة لتوجيه المستخدمين ، خاصة عند التنقل عبر مواقع الويب المعقدة. ستوضح لك هذه المقالة كيفية إنشاء مسارات تنقل في React.js.

ما هي فتات الخبز وما أهميتها؟

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

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

كيفية إنشاء فتات الخبز في React.js

هناك طريقتان رئيسيتان لإنشاء مسارات تنقل في React.js: باستخدام الامتداد رد فعل جهاز التوجيه دوم مكتبة أو باستخدام استخدام - رد فعل - جهاز التوجيه - فتات الخبز مكتبة. لكن قبل أن تبدأ ، عليك أن تفعل ذلك إنشاء تطبيق React.

الطريقة الأولى: باستخدام مكتبة React-router-dom

باستخدام مكتبة React-router-dom ، يمكنك إنشاء مسارات تنقل يدويًا لكل مسار في تطبيق React الخاص بك. توفر المكتبة ملف المكون الذي يمكن استخدامه لإنشاء فتات الخبز.

لاستخدام مكتبة React-router-dom ، عليك أولاً تثبيتها باستخدام npm:

npm ثَبَّتَ رد فعل جهاز التوجيه دوم

بمجرد تثبيت المكتبة ، يمكنك استيرادها إلى مكون React الخاص بك:

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

يمكنك بعد ذلك استخدام ملف مكون لإنشاء فتات الخبز:

<ارتباط بـ ="/">بيت</Link>
<ارتباط بـ ="/products">منتجات</Link>
<ارتباط بـ ="/products/1">المنتج 1</Link>

الآن ، يمكنك إضافة بعض الأنماط إلى فتات التنقل وإبراز الصفحة الحالية التي تتصفحها. لذلك ، يمكنك استخدام ملف اسم الطبقة دعامة من عنصر. للحصول على اسم المسار الحالي ، يمكنك استخدام موقع كائن من مكتبة React-router-dom:

يستورد {Link، useLocation} من "رد فعل جهاز التوجيه دوم"
وظيفةفتات الخبز() {
مقدار ثابت الموقع = useLocation () ؛
يعود (
<التنقل>
<ارتباط بـ ="/"
 className = {location.pathname "/"? "فتات الخبز نشطة": "شريط التنقل غير نشط"}
>
 بيت
</Link>
<ارتباط بـ ="/products"
 className = {location.pathname.startsWith ("/products")? "فتات الخبز نشطة": "شريط التنقل غير نشط"}
>
 منتجات
</Link>
<ارتباط بـ ="/products/1"
 className = {location.pathname "/products/1"? "فتات الخبز نشطة": "شريط التنقل غير نشط"}
>
 المنتج 1
</Link>
</nav>
 );
}
يصدّرتقصير فتات الخبز.

الآن ، قم بإنشاء ملف CSS جديد وقم بتسميته breadcrumbs.css. أضف قواعد CSS التالية إلى الملف:

.breadcrumb-not-active {
 لون: #cccccc؛
}
.breadcrumb-active {
 لون: #000000;
}
.breadcrumb-arrow {
 الهامش الأيسر: 10 بكسل ؛
 الهامش الأيمن: 10 بكسل ؛
}

الآن ، قم باستيراد ملف CSS الخاص بك إلى مكون React الخاص بك وأضف ملف فتات الخبز السهم فئة لك عناصر:

يستورد {Link، useLocation} من "رد فعل جهاز التوجيه دوم"
يستورد "./breadcrumbs.css";
وظيفةفتات الخبز() {
مقدار ثابت الموقع = useLocation () ؛
يعود (
<التنقل>
<ارتباط بـ ="/"
 className = {location.pathname "/"? "فتات الخبز نشطة": "شريط التنقل غير نشط"}
>
 بيت
</Link>
<تمتد className ="فتات الخبز السهم">&GT.</span>
<ارتباط بـ ="/products"
 className = {location.pathname.startsWith ("/products")? "فتات الخبز نشطة": "شريط التنقل غير نشط"}
>
 منتجات
</Link>
<تمتد className ="فتات الخبز السهم">&GT.</span>
<ارتباط بـ ="/products/1"
 className = {location.pathname "/products/1"? "فتات الخبز نشطة": "شريط التنقل غير نشط"}
>
 المنتج 1
</Link>
</nav>
 );
}
يصدّرتقصير فتات الخبز.

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

ال تضيف خاصية className الخاصة بالمكون فئة CSS إلى مسارات التنقل. تأخذ الخاصية className سلسلة أو مصفوفة من السلاسل. إذا كانت سلسلة ، فستضيف السلسلة كفئة واحدة إلى العنصر. إذا كانت مصفوفة من السلاسل النصية ، فستضيف كل سلسلة في المصفوفة كفئة منفصلة.

ال ابدا ب يتحقق الأسلوب مما إذا كان اسم المسار الحالي يبدأ بـ "/ products". هذا لأن مسار التنقل لصفحة المنتجات يجب أن يكون نشطًا ليس فقط عندما يكون المسار "/ products" ولكن أيضًا عندما يكون المسار "/ products / 1" ، "/ products / 2" ، إلخ.

الطريقة 2: باستخدام مكتبة فتات التنقّل use-reaction-router-breadcrumbs

هناك طريقة أخرى لإنشاء مسارات تنقل في React وهي استخدام مكتبة use-reaction-router-breadcrumbs. تنشئ هذه المكتبة مسارات تنقل تلقائيًا بناءً على المسارات المحددة في تطبيق React الخاص بك.

لاستخدام هذه المكتبة ، ستحتاج أولاً إلى تثبيتها باستخدام npm:

npm ثَبَّتَيستخدم-تفاعل- راوتر- فتات الخبز

بمجرد تثبيت المكتبة ، يمكنك استيرادها إلى مكون React الخاص بك:

يستورد useBreadcrumbs من "استخدام-تفاعل-جهاز توجيه-فتات الخبز"

يمكنك بعد ذلك استخدام ملف useBreadcrumbs ربط لإنشاء فتات الخبز:

مقدار ثابت فتات الخبز = useBreadcrumbs () ،
وحدة التحكم.log (فتات الخبز) ؛

سيؤدي هذا إلى تسجيل مجموعة من كائنات مسار التنقل إلى وحدة التحكم. يحتوي كل كائن مسار تنقل على معلومات حول المسار ، مثل الاسم والمسار والمعلمات.

الآن ، يمكنك عرض فتات التنقل على الشاشة. يمكنك استخدام ال مكون من مكتبة جهاز التوجيه التفاعلي لإنشاء فتات الخبز الخاصة بك:

يستورد { وصلة } من "رد فعل جهاز التوجيه دوم"
يستورد useBreadcrumbs من "استخدام-تفاعل-جهاز توجيه-فتات الخبز"
مقدار ثابت المسارات = [
 { طريق: '/users/:userId'مسار التنقل: 'مثال 1' },
 { طريق: '/data'مسار التنقل: 'مثال 2' }
];
وظيفةفتات الخبز() {
مقدار ثابت فتات الخبز = useBreadcrumbs (المسارات) ؛
وحدة التحكم.log (فتات الخبز)
يعود (
<التنقل>
 {breadcrumbs.map (({match، breadcrumb}) => (
<مفتاح الارتباط = {match.url} to = {match.url}>
 {مسار التنقل} /
</Link>
 ))}
</nav>
 );
}
يصدّرتقصير فتات الخبز.

يتم استيراد مكون الارتباط من مكتبة React-router-dom. ستستخدم هذا المكون لإنشاء روابط لأجزاء أخرى من التطبيق. بامكانك ايضا إنشاء طرق محمية باستخدام مكون الارتباط.

يتم إنشاء مصفوفة من كائنات المسار. يحتوي كل كائن مسار على مسار وخاصية مسار التنقل. تتوافق خاصية المسار مع مسار URL ، وتتوافق خاصية مسار التنقل مع اسم مسار التنقل.

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

تُستخدم طريقة الخريطة للتكرار عبر مصفوفة فتات الخبز. لكل شريط خبز ، أ المكون. يحتوي مكون الارتباط على ملف ل prop ، والذي يتوافق مع مسار URL لمسار التنقل. يتم تقديم مسار التنقل نفسه كمحتوى لـ عنصر.

الآن يمكنك إضافة بعض التصميم إلى فتات الخبز. قم بإنشاء ملف CSS جديد وقم بتسميته Breadcrumbs.css. بعد ذلك ، أضف قواعد CSS التالية إلى الملف:

.breadcrumb-not-active {
 لون: #cccccc؛
}
.breadcrumb-active {
 لون: #000000;
}

الآن ، يمكنك استيراد ملف CSS إلى مكون React وإضافة فئات مسار التنقل إلى ملف عناصر:

يستورد {Link، useLocation} من "رد فعل جهاز التوجيه دوم"
يستورد useBreadcrumbs من "استخدام-تفاعل-جهاز توجيه-فتات الخبز"
يستورد "./Breadcrumbs.css";
مقدار ثابت المسارات = [
 { طريق: '/users/:userId'مسار التنقل: 'مثال 1' },
 { طريق: '/data'مسار التنقل: 'مثال 2' }
];
وظيفةفتات الخبز() {
مقدار ثابت فتات الخبز = useBreadcrumbs (المسارات) ؛
مقدار ثابت الموقع = useLocation ()
يعود (
<التنقل>
 {breadcrumbs.map (({match، breadcrumb}) => (
<وصلة 
 مفتاح = {match.url} 
 إلى = {match.url}
 className = {match.pathname location.pathname؟ "فتات الخبز نشطة": "شريط التنقل غير نشط"}
>
 {مسار التنقل} / 
</Link>
 ))}
</nav>
 );
}
يصدّرتقصير فتات الخبز.

زيادة تفاعل المستخدم مع فتات الخبز

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

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