יישום עמוד בודד (SPA) הוא אתר אינטרנט או יישום אינטרנט המשכתבים באופן דינמי דף אינטרנט קיים עם מידע חדש משרת האינטרנט.

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

React Router עוזר לך לנווט אל הרכיב לבחירתך ומעבד אותו בקובץ ה-HTML. כדי להשתמש בו, עליך לדעת כיצד להגדיר ולשלב את נתב React עם אפליקציית React שלך.

כיצד להתקין נתב React

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

npm אני מגיב-נתב-דום

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

כדי להתקין נתב React באמצעות Yarn, הפעל את הפקודה הזו:

yarn add react-router-dom@6

הגדרת נתב React

כדי להגדיר את React Router ולהפוך אותו לזמין באפליקציה שלך, ייבא נתב דפדפן מ תגובה-נתב-דום בתוך שלך index.js קובץ, ולאחר מכן עטוף את רכיב האפליקציה שלך ב- נתב דפדפן אֵלֵמֶנט:

יְבוּא לְהָגִיב מ'לְהָגִיב';
יְבוּא ReactDOM מ'react-dom/client'; 
יְבוּא אפליקציה מ'./אפליקציה';
יְבוּא { BrowserRouter } מ'react-router-dom';
const root = ReactDOM.createRoot( מסמך.getElementById('שורש') );
root.render(


 </BrowserRouter>
);

עטיפת רכיב האפליקציה ב- נתב דפדפן אלמנט נותן לכל האפליקציה גישה מלאה ליכולות הנתב.

ניתוב לרכיבים אחרים

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

אתה תגדיר את המסלולים שלך בתוך אפליקציה רְכִיב:

יְבוּא { מסלולים, מסלול } מ'react-router-dom';
יְבוּא בית מ'./בית';
יְבוּא על אודות מ'./על אודות';
יְבוּא בלוג מ'./בלוג';
פוּנקצִיָהאפליקציה() {
לַחֲזוֹר (

'/' element={ } />
'/על אודות' element={ } />
'/בלוג' element={ }/>
 </Routes>
 )
}
יְצוּאבְּרִירַת מֶחדָל אפליקציה;

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

ה מסלולים element הוא רכיב האב שעוטף את המסלולים הבודדים שאתה יוצר ברכיב האפליקציה שלך. ה מַסלוּל אלמנט יוצר מסלול יחיד. נדרשות שתי תכונות אביזר: א נָתִיב ו אֵלֵמֶנט.

ה נָתִיב תכונה מגדירה את נתיב כתובת האתר של הרכיב המיועד. המסלול הראשון בבלוק הקוד שלמעלה משתמש בקו נטוי אחורי (/) בתור הנתיב שלו. זהו מסלול מיוחד ש-React יציג תחילה, כך שה בית רכיב עיבוד בעת הפעלת היישום שלך. אל תבלבל את המערכת הזו עם הטמעת עיבוד מותנה ברכיבי React שלך. אתה יכול לתת את זה נָתִיב לייחס כל שם שתרצה.

ה אֵלֵמֶנט תכונה מגדירה את הרכיב שה- מַסלוּל יציג.

ה קישור רכיב הוא רכיב React Router המשמש לניווט במסלולים שונים. רכיבים אלה ניגשים למסלולים השונים שיצרת.

לדוגמה:

יְבוּא { קישור } מ'react-router-dom';
פוּנקצִיָהבית() {
לַחֲזוֹר (



'/על אודות'>דף אודות</Link>
'/בלוג'>דף הבלוג</Link>
זה דף הבית
 </div>
 )
}
יְצוּאבְּרִירַת מֶחדָל בית;

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

ניתוב מקונן וכיצד ליישם אותו

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

לאחר שיצרת את הרכיבים שברצונך לנתב, תפתח מסלולים נפרדים עבור כל אחד מהם ב- אפליקציה רְכִיב.

לדוגמה:

יְבוּא { מסלולים, מסלול } מ'react-router-dom'; 
יְבוּא מאמרים מ'./מאמרים';
יְבוּא מאמר חדש מ'./NewArticle';
יְבוּא מאמר ראשון מ'./ArticleOne';
פוּנקצִיָהאפליקציה() {
לַחֲזוֹר (

'/מאמר' element={ }/>
'/מאמר/חדש' element={ }/>
'/מאמר 1' element={ }/>
 </Routes>
 )
}
יְצוּאבְּרִירַת מֶחדָל אפליקציה;

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

ה מאמר חדש שם הנתיב של המסלול מתחיל זהה לזה של מאמרים שם הנתיב של המסלול, בתוספת נטוי אחורי (/) והמילה "חדש", כלומר (/חדש). ההבדל היחיד בין שמות הנתיבים של מאמרים מסלול וה מאמר ראשון המסלול הוא הלוכסן (/1) בסוף ה- מאמר ראשון שם הנתיב של הרכיב.

אתה יכול לקנן את שלושת המסלולים במקום להשאיר אותם במצבם הנוכחי.

ככה:

יְבוּא { מסלולים, מסלול } מ'react-router-dom';
יְבוּא מאמרים מ'./מאמרים';
יְבוּא מאמר חדש מ'./NewArticle';
יְבוּא מאמר ראשון מ'./ArticleOne';
פוּנקצִיָהאפליקציה() {
לַחֲזוֹר (

'/מאמר'>
 }/>
'/מאמר/חדש' element={ }/>
'/מאמר 1' element={ }/>
 </Route>
 </Routes>
 )
}
יְצוּאבְּרִירַת מֶחדָל אפליקציה;

עטפת את שלושת המסלולים האישיים ביחיד מַסלוּל אֵלֵמֶנט. שימו לב שההורה מַסלוּל לאלמנט יש רק את נָתִיב תכונה ולא אֵלֵמֶנט תכונה שמגדירה את הרכיב לעיבוד. ה אינדקס תכונה בילד הראשון מַסלוּל אלמנט מציין שזה מַסלוּל מעבד כאשר אתה מנווט לנתיב כתובת האתר של האב מַסלוּל.

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

לדוגמה:

יְבוּא { מסלולים, מסלול } מ'react-router-dom';
יְבוּא מאמרים מ'./מאמרים';
יְבוּא מאמר חדש מ'./NewArticle';
יְבוּא מאמר ראשון מ'./ArticleOne';
פוּנקצִיָהמסלולי מאמר() {
לַחֲזוֹר (

 }/>
'/מאמר/חדש' element={ }/>
'/מאמר 1' element={ }/>
 </Routes>
 )
}
יְצוּאבְּרִירַת מֶחדָל מסלולי מאמר;

הרכיב בבלוק הקוד למעלה מכיל את המסלולים המקוננים שהיו בעבר ברכיב האפליקציה. לאחר יצירת הרכיב, עליך לייבא אותו ל- אפליקציה רכיב ולנתב אותו באמצעות יחיד מַסלוּל אֵלֵמֶנט.

לדוגמה:

יְבוּא { מסלולים, מסלול } מ'react-router-dom';
יְבוּא מסלולי מאמר מ'./ArticleRoutes';
פוּנקצִיָהאפליקציה() {
לַחֲזוֹר (

'/מאמר/*' element={ }>
 </Routes>
 )
}
יְצוּאבְּרִירַת מֶחדָל אפליקציה;

בגמר מַסלוּל רכיב, הסמל האחורי והכוכבית שנוספו בסוף שם הנתיב של המסלול מבטיחים ששם הנתיב מתאים לכל שם נתיב שמתחיל ב (/מאמר).

יש עוד לנתב תגובה

כעת עליך להכיר את היסודות כיצד לבנות יישומים של עמוד בודד ב-React.js, באמצעות נתב React.

ישנן תכונות רבות נוספות הזמינות בספריית React Router שהופכות את חווית המפתח לדינמית יותר בעת בניית יישומי אינטרנט.