קוראים כמוך עוזרים לתמוך ב-MUO. כאשר אתה מבצע רכישה באמצעות קישורים באתר שלנו, אנו עשויים להרוויח עמלת שותף.
צור דף 404 מותאם אישית באמצעות מסלול פשוט של React כדי להעניק למבקרים שלך חוויה מועילה כשהם הכי זקוקים לה.
במוקדם או במאוחר, משתמש יבקר בכתובת URL שאינה קיימת באתר שלך. מה המשתמש יעשה לאחר מכן תלוי בך.
הם עשויים ללחוץ על כפתור החזרה ולעזוב את האתר שלך. במקום זאת, אתה יכול לספק דף 404 שימושי שיעזור להם להמשיך לנווט לאתר שלך.
עבור אתרי React, אתה יכול להשתמש בנתב React כדי ליצור דף 404 לא נמצא שימושי.
יצירת עמוד 404
ה שגיאה 404 מתרחש כאשר אתה מנסה לבקר בדף באתר שהשרת לא יכול למצוא. כמפתח, טיפול בשגיאות 404 פירושו יצירת דף שהשרת משתמש בו כתחליף כאשר הוא לא מוצא את הדף המבוקש.
ב-React, אתה עושה זאת על ידי יצירת רכיב לא נמצא שיוצג במסלולים שאינם קיימים.
מאמר זה מניח שכבר יש לך אפליקציית React עובדת עם הגדרת ניתוב. אם לא, ליצור אפליקציית React ולאחר מכן להתקין נתב תגובה.
צור קובץ חדש בשם NotFound.js והוסף את הקוד הבא כדי ליצור את דף 404.
יְבוּא { קישור } מ "react-router-dom";
יְצוּאבְּרִירַת מֶחדָלפוּנקצִיָהלא נמצא() {
לַחֲזוֹר (
<div>
<h1>אופס! נראה שאתה אבוד.</h1>
<ע>הנה כמה קישורים מועילים:</p>
<קישור ל='/'>בית</Link>
<קישור ל='/blog'>בלוג</Link>
<קישור ל='/contact'>איש קשר</Link>
</div>
)
}
דף 404 זה מציג הודעה וקישורים להפניה מחדש של משתמש לדפים נפוצים באתר.
ניתוב לעמוד 404
אתה יכול ליצור מסלול רגיל באמצעות נתב React כך:
יְבוּא { מסלול, מסלולים } מ "react-router-dom";
פוּנקצִיָהאפליקציה() {
לַחֲזוֹר (
<מסלולים>
<נתיב מסלול="/" element={ <בית/> }/>
</Routes>
)
}
אתה מציין את נתיב כתובת האתר ואת האלמנט שברצונך להציג בנתיב זה.
דף 404 מוצג עבור נתיבים שאינם קיימים באתר. אז, במקום לציין את הנתיב, השתמש בכוכבית (*).
<נתיב מסלול='*' element={<לא נמצא />}/>
באמצעות * מעבד את הרכיב NotFound עבור כל כתובות האתרים שלא צוינו במסלולים.
ניתוב ב-React
אתה יכול בקלות ליצור דף 404 עבור כל כתובות האתרים שאינן קיימות באפליקציית האינטרנט של React באמצעות נתב.
לדפדפנים יש דף 404 ברירת מחדל, אך יצירת דף מותאם אישית מאפשרת לך לספר למשתמשים שלך מה השתבש וכיצד הם יכולים לתקן זאת. אתה יכול גם ליצור דף 404 שמתאים למותג שלך.
