PracticU

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

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

ריאקט - דף 404 - עמוד לא קיים / דף לא נמצא
כשמשתמש גולש לכתובת שלא קיימת באתר, כמו /customers, לא מוצג כלום. ההרצאה מוסיפה דף "Page 404" שמופיע בכל כתובת לא מוכרת.
השלבים
1. קומפוננטה חדשה: יוצרים קומפוננטה פונקציונלית בשם Page404 בתוך אזור ה-Layout, עם פסקה כמו "The page you are looking for doesn't exist".
2. ראוט אחרון: מוסיפים בסוף ה-Switch ראוט שמציג את Page404. הוא נבחר רק אם שום ראוט קודם לא התאים.
3. בדיקה: /home, /products, /support ו-/contact-us ממשיכים להציג את הקומפוננטות שלהם. כתובת כמו customers מציגה את הודעת ה-404.
4. תוספת: המרצה מוסיף ל-Page404 גם תגית iframe עם סרטון יוטיוב, שמוצג כשגולשים לראוט לא קיים.
שימו לב
1. הסדר חשוב: הראוטינג מחפש מלמעלה למטה, והראשון שמתאים נבחר, גם אם יש אחד מתאים יותר בהמשך.
2. בלי exact: אם הראוט של דף 404 לא ממוקם אחרון, הוא תופס כתובות שלא היו אמורות להגיע אליו. בהדגמה הוא הוצב מוקדם, וכתובות כמו /support ו-/contact-us הציגו "דף לא נמצא", וגם ראוט ברירת המחדל נתפס. לכן ראוט ה-404 חייב להיות אחרון.
אחרי ההרצאה אפשר להוסיף דף 404 לאתר ריאקט ולמקם אותו נכון בסדר הראוטים.
השיעור הבא בקורס: טעינה עצלה ריאקט - Lazy Loading React

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

  1. 00:00

    גלישה לראוט שאינו קיים

  2. 00:36

    שגיאת 404 Page Not Found

  3. 01:14

    יצירת קומפוננטת Page 404

  4. 01:53

    הוספת ראוט בסוף הרשימה

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

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

  1. 00:02

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

  2. 00:12

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

  3. 00:29

    אנחנו רוצים להציג לו כאן איזושהי הודעה ידועה של דף שחיפשת לא קיים או משהו כזה כמובן כל gbrief שהוא יכתוב אנחנו רוצים לתת לו את אותה הודעה אז זאת בעצם שגיאה ידועה שנקראת שגיאת 404 page not found איך אנחנו מטפלים בזה

  4. 00:52

    אנחנו רוצים להוסיף עוד קומפוננטה בואו נוסיף עוד קומפוננטה אפשר להוסיף אותה ל-layout area אפשר להוסיף אותה ל-shared עוד אריה אולי כי אולי היא נחשבת משותפת אני אוסיף אותה ללאוט אריה ובואו נקרא לה פשוט page 404 כאילו שגיאה מאוד ידועה page 404 דף לא נמצא זה כמובן אמור להיות functional component מאוד פשוטה

  5. 01:25

    והנה יש לנו פה את הפייג' not found בואו נעצב אותו טיפה נכתוב כאן איזושהי פסקה אולי the page you are looking for doesn't exist או כל הודעה אחרת אנחנו רוצים את הקומפוננטה הזאת להציג אם שום דבר אחר לא נמצא מה שחשוב להבין קודם כל זה שמנגנון הראוטינג רואה את המחרוזת שכתבתם

  6. 02:06

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

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

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

ההרצאה הבאה: טעינה עצלה ריאקט - Lazy Loading React

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

  • יצירת עמוד עבור המוצר
  • גלישה ל-Route שאינו קיים
  • פתיחת פרויקט קיים ב-Android Studio
  • בניית עמוד LOGIN אמיתי מאפס בשפת DART

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

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