שליחת פרמטרים לראוטינג - ריאקט
/products/details/12. ההרצאה בונה קומפוננטה שקוראת את הקוד הזה מהראוט, ומסכמת את נושא הראוטינג./product/details/<id>, והקומפוננטה תקרא את ה-id ותציג את המוצר.ProductDetails בתוך product-area, עם state ועם props, כי הקומפוננטה תקבל את ה-id דרך ה-props ובהמשך תנהל מוצר./product/details/:id, לפני דף ה-404 שחייב להישאר אחרון. נקודתיים לפני מילה מסמנות פרמטר, וה-id הוא שמו. כל ערך שיופיע במיקום הזה, כמו 8, 17 או ABC, יתאים לראוט.RouteParams, ובו שדה id מסוג string, כי כל מה שמגיע מהראוט הוא מחרוזת. השם חייב להיות זהה לשם בפרמטר שבראוט.ProductDetailsProps מרחיב את RouteComponentProps<RouteParams> של ריאקט ראוטר. כך מתווספים ה-props האובייקט match ובתוכו params.componentDidMount קוראים this.props.match.params.id. בהדגמה עם alert של הערך מוצגים 7, 13, ABC ואחרים בהתאם למה שנכתב בכתובת.פרקי ההרצאה: שליחת פרמטרים לראוטינג - ריאקט
תמלול ההרצאה: שליחת פרמטרים לראוטינג - ריאקט
הטקסט המלא של הדקות הראשונות בהרצאה «שליחת פרמטרים לראוטינג - ריאקט» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
הדבר הבא שאנחנו הולכים לראות בכל הנושא של מנגנון הראוטינג זה הנושא של ראוט פרמטרס. זאת אומרת אנחנו יכולים לשלוח מידע משלנו בראוט עצמו.
בואו ניקח לדוגמה את פרודקטס. אם אנחנו גולשים לפרודקטס אז הראוט עצמו זה סלאש פרודקטס. אנחנו רוצים לראות כאן בהמשך כמובן רשימה של מוצרים.
את הרשימה אנחנו נביא מהבק אנד. אבל מה קורה אם היוזר גולש לדוגמה לפרודקט סלאש ואז בוא נניח דיטיילס כי הוא רצה לראות מידע לגבי מוצר ואז את הקוד של המוצר עצמו. עכשיו אמרתי יוזר גולש כמובן שהיוזר לא הולך להקליד את הדברים האלה הוא לא אמור לדעת מה להקליד בשורת ה-URL אלא אנחנו פשוט על איזה שהוא מוצר בשביל לראות פרטים נוספים לגביו.
אז ברגע שנקליק עליו זה סוג של לינק שאנחנו רוצים לגלוש בדיוק לכתובת הזאת. ברגע שנגלוש אליה, כמובן שכרגע אנחנו מקבלים את הפייג' נוט פאונד כי אין לנו ראוט כזה, אבל ברגע שנגלוש אליה אנחנו רוצים להציג כאן את הפרטים של מוצר בעל ID 12. אז ה-12 הזה שזה הקוד של המוצר או 56 או 7 או 1 או לא משנה וה-ID של המוצר
שאנחנו רוצים להציג וזה הפרמטר שאנחנו רוצים לשלוח לראוט הזה. את זה אנחנו רוצים לבנות כרגע. לצורך כך בואו נוסיף קומפוננטה שהמטרה שלה יהיה לקרוא את אותו ID ובהמשך לפי ה-ID הזה להציג את הפרטים של אותו מוצר.
אז בואו נחזור ונייצר לעצמנו קומפוננטה, אנחנו רוצים to create, הקומפוננטה תהיה cc ואנחנו רוצים לקרוא לה, בואו נניח, קודם כל נשים אותה בproducts area כי היא שייכת לעולם המוצרים ונקרא לה product.dl זה נראה לי שם טוב.
אנחנו רוצים שיהיה לנו state זה ברור כי אנחנו רוצים לנהל מוצר ולהציג אותו ובשביל להביא את ה-id מהראוט אם הקומפוננטה היא cc קלאס קומפוננט ואנחנו כן רוצים שהיא תהיה במקרה הזה קלאס קומפוננט אז אנחנו צריכים גם props, אז בואו נוסיף props וכמובן שעוד מעט נראה מה השימוש ב-props.
אז יש לנו כאן קומפוננטה שהיא class component, כי יש בה טיפה נפח, אתם תראו את זה בהמשך כאשר באמת נגרום לה לעבוד כמו שצריך.
היא נמצאת ב-products area, היא נקראת product details, מציגה פרטים לגבי מוצר, יש לה state כי אנחנו בהמשך נערוך את הפרטים של המוצר ויש לה props בכדי לקטוף את ה-ID מלמעלה מה-route.
תכף אנחנו נראה איך זה מסתדר. אז הנה הקומפוננטה product details, יש לנו את ה-props, יש לנו את ה-state, הם מוגדרים כמו שצריך. בינתיים לא כתבנו בה שום דבר, ואנחנו רוצים את המנגנון של הראוטינג.
במנגנון של הראוטינג אנחנו רוצים ראוט נוסף בגלל שהוא קשור למוצרים אני אשים אותו פה במוצרים הוא כמובן לא חייב להיות מיד אחרי המוצרים הוא יכול להיות בכל מקום אחר רק כמובן זה חייב להיות אחרון הפייג' 404 אז בואו נקרא לו product product/details/ ופה אנחנו רוצים להגדיר שיושב
כאן route parameter אנחנו לא רוצים להגדיר איזושהי מכרוזת hardcoded כלשהי כמו abc לדוגמה או prodid לדוגמה כי אם אנחנו רושמים את זה אז זה אומר שרק אם היוזר גולש לproduct/detail/produds פרוד איי-די, למעשה אם זה רק, זה אמור להיות פרוד איי-די בצורה כזאת.
רק אז הקומפוננטה שאנחנו רוצים תוצג. אנחנו לא רוצים את הפרודקט ליסט, אנחנו רוצים את פרודקט דיטיילס. אנחנו לא רוצים שהיוזר יכתוב בשורת ה-URL פרוד איי-די או שמישהו אחר יכתוב.
אנחנו רוצים בשורת ה-URL לרשום את האיי-די האמיתי, לדוגמה 12, לדוגמה 7, כל איי-די אמיתי. זה נקרא ראוט פרמטר וזה פשוט מתחיל בנקודותיים ברגע שיש לכם מילה שמתחילה בנקודותיים זה הראוט פרמטר אנחנו חייבים לתת לפרמטר שם אני אקרא לו כרגע ID ובעזרת השם הזה אנחנו נקטוף מלמעלה את ה-value אז עכשיו הראוט
הוא פרודקט סלאש דיטיילס סלאש כל דבר אחר. לא משנה מה כתוב פה, אם למעלה יהיה כתוב 8, הראוט הזה יילקח.
כלומר, פרודקט סלאש דיטיילס סלאש 8. אם למעלה יהיה כתוב פרודקט סלאש דיטיילס סלאש 17, הראוט הזה יילקח. אם למעלה כתוב פרודקט סלאש דיטיילס סלאש ABC, הראוט הזה יילקח.
כל מה שכתוב אחרי הפרודקט סלאש דיטיילס, כמובן אם כתוב פה רק דבר אחד ולא כמה דברים עם פלאשים ביניהם, אז הראוט הזה יילקח, כי הוא יודע שלא משנה מה כתוב פה, מותר לו, זה פרמטר מסוים שמותר לכתוב בראוט בדיוק במיקום
הזה, ואז הקומפוננטה הזאת תיכנס לתוקף. אם אנחנו כרגע סתם באים לקומפוננטה הזאת ורושמים פה פסקה product details, אז ברגע שאנחנו הולכים בחזרה וגולשים לפרודקט סלאש דיטייל סלאש משהו לא משנה מה, הנה בבקשה הקומפוננטה.
בואו נחזור להום, בואו נחזור לפרודקטס או סופלייר, זה לא משנה, ספורט סליחה, ויש לנו פה פרודקט סלאש דיטייל סלאש שבע עשרה והנה אנחנו רואים שהגענו לפרודקט דיטייל, אנחנו עוד לא כתפנו מלמעלה את ה-ID, תכף אנחנו נעשה את זה,
אבל הצלחנו להציג את הקומפוננטה. עכשיו, שימו לב שהיוזר כמובן לא הולך לכתוב את זה, אני אמרתי את זה אבל אני אחזור על זה, אלא בהמשך, כשיהיו לנו פה את רשימת המוצרים, אז לכל מוצר יהיה איזה לינק שאם לוחצים עליו, אז אנחנו מופנים אוטומטית ל-products/details/ ואת אותו ID של המוצר שהקליקו עליו
וכמובן נגיע לקומפוננטה הזאת, הקומפוננטה תקטוף מלמעלה את אותו ID ותלך ל-Backend או אפילו אם יש לה את המידע הזה, היא פשוט תציג את המידע של אותו מוצר.
אז כל מה שנשאר לנו לעשות כרגע, אנחנו לא הולכים באמת להתעסק עם מוצרים, אנחנו רוצים רק בקומפוננטה הזאת לקטוף את ה-ID מלמעלה. בהמשך כשנראה את אותו נושא של איך אנחנו גולשים לשרת ומביאים את המידע אז אנחנו בעצם נתעסק עם המוצרים עצמם ונציג פה מוצרים ונציג בדיטיילד מוצרים את המוצר הכוונה.
כרגע אנחנו רק רוצים לחזור לקומפוננטה הזאת ולראות מה הדברים שאנחנו צריכים לבצע בשביל לקטוף את ה-ID מלמעלה ומה שאנחנו צריכים לעשות זה משהו שהוא די סימפל אם אנחנו מסתכלים עוד פעם על המנגנון של הראוטינג המילה הזאת שכתבנו פה יש לה משמעות אותו שם שכתבנו פה אני כתבתי פה אנחנו צריכים לבנות באיזשהו אינטרפייס, זה לא יהיה כאן, זה לא יהיה בפורופס,
באיזשהו אינטרפייס מיוחד. אני יכול לקרוא לו בכל שם, אני אקרא לו ראוט פא ראמז ואותו שם שהגדרנו פה בפרמטר הזה, אני חייב להגדיר כאן ID. ID של מוצר זה number אבל כל מה שמגיע מהראוט הוא סטרינג.
אפילו שה-id של המוצר הוא מספר אנחנו צריכים להגדיר סטרינג בשביל שהוא באמת יתאים למחרוזת שנמצאת בראוט כי כל מה שכתוב בראוט זה בעצם סטרינגים אחר כך אנחנו נוכל להפוך אותו למספר אם נרצה אז יש לנו פה אינטרפייס הוא נקרא ראוט פראמס הוא יכול להיקרא בכל שם שאותו פרמטר אותו שם פרמטר שמוגדר פה חייב להיות השם שמוגדר פה. אם אני הייתי מגדיר כאן לדוגמה