PracticU

ניתוב ברירת מחדל - ריאקט

בלי כתוביותעם כתוביות
PracticU › קורס ריאקט - React › ניתוב ברירת מחדל - ריאקט
מילון מושגים:
ראוט - הגדרה שמקשרת כתובת בקשה לקוד שמטפל בה באפליקציה. גם מסלול שדרכו עוברות חבילות ברשת.
תגית - סימון בקוד, למשל ב-HTML, שתוחם רכיב ומגדיר את תפקידו או תכונותיו. גם תווית לסימון וקיטלוג פריטים.
דפדפן - תוכנה שמציגה דפי אינטרנט ומריצה את הקוד שבהם, ומאפשרת לגלוש בין אתרים, למשל Chrome או Firefox.
נתיב - מחרוזת שמתארת את מיקומו של קובץ או תיקייה במערכת הקבצים, או כתובת של משאב בתוך אתר.

ניתוב ברירת מחדל - ריאקט
מה קורה כשמשתמש גולש לכתובת הראשית של האתר, ולא נמצא ראוט שמתאים לה? כרגע מוצג מסך ריק, וההרצאה מראה שתי דרכים לטפל בכך.
האפשרויות
1. Redirect: מוסיפים בקומפוננטת הראוטינג תגית Redirect, לא Route, עם from="/" ו-to="/home" ו-exact. כך הכתובת הראשית מפנה לדף הבית, והכתובת בדפדפן מתעדכנת ל-/home. כל שאר הראוטים ממשיכים לעבוד.
2. ראוט נוסף: משכפלים את הראוט של Home ונותנים לו path="/". אז גם / וגם /home מציגים את Home, ובדפדפן נשארת הכתובת / בלי /home.
מה כדאי לבחור
בשיטה השנייה העיצוב של הקישור הפעיל בתפריט לא נכנס לתוקף, כי הכתובת איננה /home. אפשר לפתור זאת אחרת, אבל בדרך כלל מעדיפים להפנות לדף הבית עם Redirect, ולכן המרצה מוחק את הראוט הנוסף ומשאיר את ה-Redirect.
אחרי ההרצאה אפשר להגדיר ברירת מחדל לכתובת הראשית של האתר, כך שהמשתמש לא יראה דף ריק.
השיעור הבא בקורס: ריאקט - דף 404 - עמוד לא קיים / דף לא נמצא

פרקי ההרצאה: ניתוב ברירת מחדל - ריאקט

  1. 00:00

    גלישה לדף הראשי ללא ראוט

  2. 00:40

    ניתוב לאחד הראוטים הקיימים

  3. 01:25

    הגדרת תגית Redirect

  4. 02:05

    ניתוב דף הבית בשני paths

תמלול ההרצאה: ניתוב ברירת מחדל - ריאקט

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

  1. 00:02

    הדבר הבא שעלינו לטפל בו במנגנון הראוטינג זה מה קורה אם היוזר גולש ישירות לדף הראשי של האתר. כרגע אנחנו רואים localhost:2000 אבל זה בדיוק מקביל לכתובת הראשית נניח mysite.com בואו נראה מה קורה אם הוא גולש לזה אנחנו רואים שמנגנון הראוטינג לא מוצא שום ראוט מתאים אז אנחנו רוצים שמשהו יקרה, אנחנו לא רוצים

  2. 00:37

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

  3. 00:47

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

  4. 01:05

    בואו נחזור למנגנון הראוטינג. הנה היא פה, היא לא תגית ראוט, היא תגית שנקראת Redirect. תגית ה-Redirect פשוט באה ואומרת לנו מאיזה ראוט אתה רוצה שאני אבצע Redirection, אנחנו רוצים לבצע Redirect מהראוט הראשי, 2. לאן אתה רוצה לבצע Redirection?

  5. 01:41

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

  6. 02:07

    אפשר במקום זה פשוט לשכפל את הראוט הזה וגם כאן לשים את הפאת' הזה. זאת אומרת, גם אם ה-path שלנו הוא slash home, גם אם ה-path שלנו הוא הרות, אנחנו רוצים להציג את הקומפוננטה של ה-home, זה גם כן יעבוד, ובמצב הזה אנחנו basically לא רואים פה slash home.

  7. 02:42

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

לקורס המלא: קורס ריאקט אונליין

ההרצאה הקודמת: עיצוב קישורים בתפריט הראשי באתר - ריאקט

ההרצאה הבאה: ריאקט - דף 404 - עמוד לא קיים / דף לא נמצא

הרצאות קשורות מקורסים אחרים

  • ניתוב ברירת מחדל - Default Static Route
  • ערכי ברירת מחדל עבור פרמטרים
  • ניתוב סטטי צף
  • ברירת המחדל – אין טעינה של מידע נלווה

קורסים נוספים במסלול

  • קורס יסודות HTML - בניית אתר אינטרנט פשוט
  • קורס CSS 3 - בדגש על Flex & Grid
  • קורס Javascript כולל JQuery
  • קורס ג'אווה סקריפט מעשי - JavaScript
  • קורס TypeScript
  • קורס NodeJS