הגדרת ניתוב בתפריט הראשי באתר - ריאקט
# בקישורי התפריט בנתיבים /home, /products, /support ו-/contact-us. הקומפוננטות אכן מתחלפות.index.html שבתיקיית public שמים תגית marquee זמנית עם המילה "Testing". בכל לחיצה על קישור הטקסט מתחיל מחדש, כי כל ה-index.html נטען מחדש.a עם href גורמת לדפדפן לגלוש לשרת, בלי קשר לכוונה שלנו.a בתגית NavLink של react-router-dom, עם התכונה to שמקבלת את הנתיב, למשל to="/home". NavLink יורשת מ-Link ומוסיפה יכולות. מאחורי הקלעים זו תגית a בלי href שגולש לשרת: JavaScript משנה את הכתובת בדפדפן, ומנגנון הראוטינג מציג את הקומפוננטה המתאימה.marquee לא מתחיל מחדש, אין טעינה מחדש, האתר מהיר יותר ואין תקשורת מיותרת עם השרת. אחרי הבדיקה מסירים או מעירים את ה-marquee.NavLink בלי לגרום לטעינה מחדש של הדף.פרקי ההרצאה: הגדרת ניתוב בתפריט הראשי באתר - ריאקט
תמלול ההרצאה: הגדרת ניתוב בתפריט הראשי באתר - ריאקט
הטקסט המלא של הדקות הראשונות בהרצאה «הגדרת ניתוב בתפריט הראשי באתר - ריאקט» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
כעת בואו נטפל בתפריט. אנחנו רוצים שלחיצה על התפריט תגרום להצגה של הקומפוננט המתאים. כרגע התפריט לא עושה שום דבר. אם אני רגע אגש ואלחץ על ההום, אני רואה שיש פה רק מעין סולמית כזאת, כי זה מה שכתבנו בתפריט לבצע.
אז נראה שהטיפול בתפריט הוא מאוד פשוט, וזה רק לומר לו, בואו נסתכל רגע על התפריט, שבמקום להציג סולמית, שיציג את הראוט המתאים.
לדוגמה, אם אנחנו בהום, שיציג /home ואם אנחנו בפרודקטס או מקליקים על פרודקטס, אז שיוצג /products עבור support אנחנו רוצים שהראוט יהיה /support עבור contact us אנחנו רוצים contact/us זה אמור לפתור את הבעיה.
בואו נסתכל רגע, ונלחץ על Home, עובד? נלחץ על Products, והנה דף המוצרים. Support, עובד פרפקט. Contact us, מדהים. אבל האם באמת המערכת כרגע עובדת כמו שצריך?
בואו נסתכל עוד פעם מה קורה כשאנחנו לוחצים על Home. אנחנו באמת רואים ה-Home Component, אבל שמתם לב לעוד משהו שקרה? שימו לב מה קורה כשאני מתחיל להקליק על ראוטים שונים.
מה בעצם אתם רואים שמתרחש כאן? תסתכלו על הלינק, על האייקון הזה ועל האייקון הזה. מה בעצם קורה איתם? זה נראה כאילו שהדפדפן גולש לשרת ומקבל את האתר, וזה בדיוק מה שקורה.
אז האם זה טוב? לא טוב? מה הבעיה עם זה? אז זה לא טוב וזה די גרוע מפני שאנחנו בונים אפליקציה ב-react ואנחנו רוצים שהאפליקציה שלנו תהיה single page application.
אנחנו רוצים שברגע שאנחנו לוחצים על home לא תהיה לנו גלישה לשרת ואנחנו נקבל בחזרה את כל הדף כולו כולל הכותרת, כולל האייקון כולל התפריט כולל הזכויות יוצרים וכולל הדף הזה ולהתחיל להציג הכל מחדש זה לא מה שאנחנו רוצים אנחנו בכלל רוצים שתהיה גלישה לשרת אם לא צריך כל ה-JavaScript כבר נמצאת בפרונט-אנד למה אנחנו צריכים ללכת לשרת
אם יש לנו את זה בפרונט-אנד ואנחנו רואים שיש גלישה לשרת לפי הרפרוש הזה כל מה שאנחנו רוצים לעשות זה ברגע שאנחנו רוצים לספורט רק שהקומפוננט הזה יתחלף בפרונט לא בבאק בואו נראה שבאמת כל הדף נטען, יש איזושהי טכניקה כזאת ממש פשוטה לראות את זה.
אם אנחנו הולכים ל-public אנחנו רואים שיש לנו פה את האינדקס html. האינדקס html זה הדף ה- html האחד והיחיד שיש ב- backend וכמובן הוא מגיע לפרונט והמערכת מתחילה להיכנס לתוקף ולהכניס לתוכו את הקומפוננטות הדרושות.
בואו נשים כאן תגית שנקראת מרקי. מרקי זו תגית די ישנה, היא די... דפדפנים כבר עדיין מכירים אותה, אבל היא נחשבת מיושנת.
ומה שהיא עושה, היא מזיזה טקסט על המסך. אני כרגע ארשום פה את המילה טסטינג, ושימו לב שרואים פה את הטסטינג בקטן זז כזה. שימו לב מה קורה כשאני לוחץ על הום.
טסטינג מתחיל מההתחלה. רגע, למה שהטסטינג יתחיל מההתחלה? פרודקטס טסטינג מתחיל מההתחלה ספורט הוא מתחיל מההתחלה הרי מתי הוא אמור להתחיל מההתחלה?
רק כשהאינדקס נטען מחדש ואז הוא מציב מחדש את המרקי ואז המרקי מתחילה מההתחלה. אם כל הדף הזה לא היה מתרפרש ולא היה נטען מחדש אלא רק הקומפוננטה שאנחנו רוצים הייתה מוצגת אז לא היינו רואים את המרקי מתחיל מההתחלה וזו באמת הייתה אינטקציה שאנחנו בונים סינגל פייג' אפליקיישן כמו שצריך.
אז מה בדיוק הבעיה שקיימת פה ואיך לפתור אותה? הבעיה היא תגיות ה-a. כאשר דפדפן רואה תגית a שיש לה h רף שאומר לאן לגלוש, הדפדפן לא מעניין אותו שאנחנו רוצים לבנות סינגל פייג' אפליקיישן.
הדפדפן אומר יופי אני גולש לשרת, לכתובת הזאת מה אכפת לי מה השרת מביא לי. יחזיר עוד פעם את האינדקס, שזה כמובן מיותר לגמרי, והדפדפן יתחיל לטעון מחדש את כל האינדקס, כולל המרכיב, כולל ההדר, כולל המניו, כולל הפוטר, כאשר אין שום צורך לטעון את כל הלאוט מחדש,
וכולל הקומפוננטה שאנחנו גולשים אליה. אנחנו לא רוצים את ההתנהגות הזאת בסינגל פייג' אפליקיישן. אז כל מה שאנחנו צריכים לעשות זה לא להשתמש בתגית a native של html, אלא בתגית מיוחדת של מנגנון הראוטינג, התגית הזאת נקראת נב לינק.
הנה אנחנו רואים שהיא מגיעה מכאן. יש כל מיני תגיות כאלה, יש תגית לינק, נב לינק יורשת מלינק ואז היא מכילה קצת יותר יכולות, אנחנו נשתמש בנב לינק ואנחנו רוצים שהתגית הזאת תהיה עבור דף הבית וכאן להגיד לאן אנחנו רוצים לגלוש.
טו, זה מתבצע על ידי טו,