האם אי פעם שמת לב לאותם פיסות טקסט קטנות באתרים מסוימים המציינים את מיקומך הנוכחי באתר? אלה נקראים פירורי לחם, והם יכולים להיות דרך מועילה לכוון משתמשים, במיוחד בעת ניווט באתרים מורכבים. מאמר זה יראה לך כיצד ליצור פירורי לחם ב-React.js.

מהם פירורי לחם וכיצד הם חשובים?

פירורי לחם הם בדרך כלל פיסות טקסט קטנות המציגות את המיקום הנוכחי באתר. הם יכולים להיות מועילים בהכוונת משתמשים, במיוחד בעת ניווט באתרי אינטרנט בעלי מספר דפים. על ידי מתן שובל של קישורים, פירורי לחם יכולים לעזור למשתמשים להבין היכן הם נמצאים באתר ולאפשר להם לנווט חזרה למקטעים קודמים בקלות.

חשוב לציין שאין להשתמש בפירורי לחם כאמצעי הניווט העיקרי באתר. במקום זאת, יש להשתמש בהם בנוסף לרכיבי ניווט אחרים כגון תפריט או שורת חיפוש.

כיצד ליצור פירורי לחם ב-React.js

ישנן שתי דרכים עיקריות ליצור פירורי לחם ב-React.js: באמצעות ה- תגובה-נתב-דום ספרייה או באמצעות ה השתמש-תגיב-נתב-פירורי לחם סִפְרִיָה. אבל לפני שמתחילים, אתה חייב ליצור אפליקציית React.

שיטה 1: על ידי שימוש בספריית react-router-dom

עם ספריית react-router-dom, אתה יכול ליצור ידנית פירורי לחם עבור כל נתיב באפליקציית React שלך. הספרייה מספקת א רכיב שניתן להשתמש בו ליצירת פירורי לחם.

instagram viewer

כדי להשתמש בספריית react-router-dom, תחילה עליך להתקין אותה באמצעות npm:

npm להתקין תגובה-נתב-דום

לאחר התקנת הספרייה, תוכל לייבא אותה לרכיב React שלך:

יְבוּא { קישור } מ 'react-router-dom'

לאחר מכן תוכל להשתמש ב- רכיב ליצירת פירורי לחם:

<קישור ל="/">בית</Link>
<קישור ל="/products">מוצרים</Link>
<קישור ל="/products/1">מוצר 1</Link>

כעת, אתה יכול להוסיף קצת סטיילינג לפירורי הלחם ולהדגיש את הדף הנוכחי שבו אתה נמצא. לשם כך, אתה יכול להשתמש ב- className אבזר של ה רְכִיב. כדי לקבל את שם הנתיב הנוכחי, אתה יכול להשתמש ב- מקום אובייקט מספריית react-router-dom:

יְבוּא { קישור, השתמש במיקום } מ 'react-router-dom'
פוּנקצִיָהפרורי לחם() {
const מיקום = useLocation();
לַחֲזוֹר (
<nav>
<קישור ל="/"
 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;
}
.פעיל פירורי לחם {
 צֶבַע: #000000;
}
.breadcrumb-arrow {
 שוליים-שמאליים: 10px;
 שוליים-ימין: 10px;
}

כעת, ייבא את קובץ ה-CSS שלך לרכיב React שלך והוסף את חץ פירורי לחם הכיתה שלך רכיבים:

יְבוּא { קישור, השתמש במיקום } מ 'react-router-dom'
יְבוּא "./breadcrumbs.css";
פוּנקצִיָהפרורי לחם() {
const מיקום = useLocation();
לַחֲזוֹר (
<nav>
<קישור ל="/"
 className={location.pathname "/"? "פעיל בפירורי לחם": "פירורי לחם-לא-פעיל"}
>
 בית
</Link>
<span className="חץ פירורי לחם">&gt;</span>
<קישור ל="/products"
 className={location.pathname.startsWith("/products")? "פעיל בפירורי לחם": "פירורי לחם-לא-פעיל"}
>
 מוצרים
</Link>
<span className="חץ פירורי לחם">&gt;</span>
<קישור ל="/products/1"
 className={location.pathname "/products/1"? "פעיל בפירורי לחם": "פירורי לחם-לא-פעיל"}
>
 מוצר 1
</Link>
</nav>
 );
}
יְצוּאבְּרִירַת מֶחדָל פרורי לחם;

יש סוגים שונים של ווים ב-React. ספריית ה-react-router-dom useLocation hook נותן לך גישה לאובייקט המיקום, הכולל מידע על נתיב ה-URL הנוכחי.

ה מאפיין className של רכיב מוסיף מחלקת CSS לפירורי הלחם. מאפיין className לוקח מחרוזת או מערך של מחרוזות. אם זו מחרוזת, היא תוסיף את המחרוזת כמחלקה בודדת לאלמנט. אם זה מערך של מחרוזות, כל מחרוזת במערך תתווסף כמחלקה נפרדת.

ה מתחיל עם השיטה בודקת אם שם הנתיב הנוכחי מתחיל ב-"/products". הסיבה לכך היא שפירור הלחם של דף המוצרים צריך להיות פעיל לא רק כאשר הנתיב הוא "/products", אלא גם כאשר הנתיב הוא "/products/1", "/products/2" וכו'.

שיטה 2: על ידי שימוש בספריית use-react-router-breadcrumbs

דרך נוספת ליצור פירורי לחם ב-React היא באמצעות ספריית use-react-router-breadcrumbs. ספריה זו יוצרת פירורי לחם באופן אוטומטי על סמך המסלולים שהוגדרו באפליקציית React שלך.

כדי להשתמש בספרייה זו, תחילה תצטרך להתקין אותה באמצעות npm:

npm להתקיןלהשתמש-תגובה-נתב-פירורי לחם

לאחר התקנת הספרייה, תוכל לייבא אותה לרכיב React שלך:

יְבוּא השתמש בפירורי לחם מ 'השתמש-תגיב-נתב-פירורי לחם'

לאחר מכן תוכל להשתמש ב- השתמש בפירורי לחם וו ליצירת פירורי לחם:

const breadcrumbs = useBreadcrumbs();
לְנַחֵם.log (פירורי לחם);

זה ירשום מערך של אובייקטים של פירורי לחם לקונסולה. כל אובייקט פירורי לחם מכיל מידע על המסלול, כגון השם, הנתיב והפראמים.

כעת, אתה יכול להציג את פירורי הלחם שלך למסך. אתה יכול להשתמש ב רכיב מספריית ה-react-router ליצירת פירורי הלחם שלך:

יְבוּא { קישור } מ 'react-router-dom'
יְבוּא השתמש בפירורי לחם מ 'השתמש-תגיב-נתב-פירורי לחם'
const מסלולים = [
 { נתיב: '/users/:userId', פירורי לחם: 'דוגמה 1' },
 { נתיב: '/data', פירורי לחם: 'דוגמה 2' }
];
פוּנקצִיָהפרורי לחם() {
const פירורי לחם = שימוש בפירורי לחם (מסלולים);
לְנַחֵם‎.log (פירורי לחם)
לַחֲזוֹר (
<nav>
 {breadcrumbs.map(({ match, breadcrumb }) => (
<קישור מפתח={match.url} ל={match.url}>
 {breadcrumb} /
</Link>
 ))}
</nav>
 );
}
יְצוּאבְּרִירַת מֶחדָל פרורי לחם;

רכיב הקישור מיובא מספריית react-router-dom. אתה תשתמש ברכיב זה כדי ליצור קישורים לחלקים אחרים של היישום. אתה יכול גם ליצור מסלולים מוגנים באמצעות רכיב הקישור.

נוצר מערך של אובייקטי מסלול. כל אובייקט נתיב מכיל נתיב ומאפיין פירורי לחם. מאפיין הנתיב מתאים לנתיב כתובת האתר, והמאפיין breadcrumb מתאים לשם של ה-breadcrumb.

ה השתמש בפירורי לחם וו משמש ליצירת פירורי הלחם. וו זה מקבל מערך של מסלולים כפרמטר. המסלולים משמשים ליצירת פירורי הלחם.

שיטת המפה משמשת לחזרה על מערך פירורי הלחם. עבור כל פירורי לחם, א נוצר רכיב. לרכיב הקישור יש א ל prop, התואם לנתיב כתובת האתר של פירור הלחם. פירור הלחם עצמו מוצג כתוכן ה- רְכִיב.

עכשיו אתה יכול להוסיף קצת סטיילינג לפירורי הלחם. צור קובץ CSS חדש ותן לו שם Breadcrumbs.css. לאחר מכן, הוסף את כללי ה-CSS הבאים לקובץ:

.breadcrumb-not-active {
 צֶבַע: #cccccc;
}
.פעיל פירורי לחם {
 צֶבַע: #000000;
}

כעת, אתה יכול לייבא את קובץ ה-CSS לרכיב React ולהוסיף את מחלקות ה-breadcrumb ל- רכיבים:

יְבוּא { קישור, השתמש במיקום } מ 'react-router-dom'
יְבוּא השתמש בפירורי לחם מ 'השתמש-תגיב-נתב-פירורי לחם'
יְבוּא "./Breadcrumbs.css";
const מסלולים = [
 { נתיב: '/users/:userId', פירורי לחם: 'דוגמה 1' },
 { נתיב: '/data', פירורי לחם: 'דוגמה 2' }
];
פוּנקצִיָהפרורי לחם() {
const פירורי לחם = שימוש בפירורי לחם (מסלולים);
const מיקום = useLocation()
לַחֲזוֹר (
<nav>
 {breadcrumbs.map(({ match, breadcrumb }) => (
<קישור 
 key={match.url} 
 to={match.url}
 className={match.pathname location.pathname? "פעיל בפירורי לחם": "פירורי לחם-לא-פעיל"}
>
 {breadcrumb} / 
</Link>
 ))}
</nav>
 );
}
יְצוּאבְּרִירַת מֶחדָל פרורי לחם;

הגבר את מעורבות המשתמש עם פירורי לחם

עם פירורי לחם, אתה לא רק יכול לעזור למשתמשים להבין היכן הם נמצאים באתר שלך, אלא אתה יכול גם להגביר את מעורבות המשתמשים. ניתן להשתמש בפירורי לחם כדי להציג את ההתקדמות של המשתמש במשימה, כגון תהליך הרשמה או רכישה. על ידי הצגת ההתקדמות של המשתמש, אתה יכול לעודד אותו להשלים את המשימה.

יש גם הרבה דברים אחרים שכדאי לזכור בעת עיצוב אתר כגון שימושיות, נגישות וידידותיות לנייד. עם זאת, אם תקח בחשבון את הדברים האלה, אתה יכול ליצור אתר שהוא גם ידידותי למשתמש וגם מרתק.