נפתרה: דף הטעינה מחדש של הנתב לא נמצא

הבעיה העיקרית הקשורה לדף הטעינה מחדש של React Router לא נמצאה היא שכאשר משתמש מרענן את הדף, הדפדפן ינסה להגיש בקשה לשרת עבור כתובת האתר הנוכחית. עם זאת, מכיוון ש-React Router הוא ניתוב בצד הלקוח, אין מסלול שרת מתאים לכתובת ה-URL ולכן מוחזרת שגיאה 404 Not Found. זה יכול להיות בעייתי במיוחד אם משתמשים מצפים שתוכן מסוים יופיע בזמן רענון.

import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

const App = () => (
  <Router>
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />

      {/* Page Not Found */}
      <Route render={() => (<h1>Page not found</h1>)} />

    </Switch>
  </Router>  
);

// שורה 1: שורה זו מייבאת את רכיבי BrowserRouter, Route, ו-Switch מספריית react-router-dom.

// שורה 3: שורה זו מגדירה פונקציה בשם App אשר מחזירה קוד JSX.

// שורה 5: שורה זו עוטפת את כל קוד ה-JSX ברכיב נתב מ-react-router-dom.

// שורה 6: שורה זו עוטפת את כל המסלולים ברכיב Switch מ-react-router-dom.

// שורות 7 – 9: קווים אלו מגדירים שני מסלולים עבור '/' ו-'/about' בהתאמה עם הרכיבים שלהם (בית ואודות).

// שורות 11 – 12: שורות אלו מגדירות מסלול כאשר אין מסלולים אחרים תואמים, מה שמראה תג h1 האומר "הדף לא נמצא".

הדף לא נמצא שגיאה

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

איך אני מטפל בדף לא נמצא בנתב מגיב

בעת שימוש בנתב React, אתה יכול לטפל בדף שלא נמצא על ידי יצירת מסלול מותאם אישית שיציג רכיב NotFound כאשר כתובת האתר אינה תואמת לאף אחד מהמסלולים הקיימים. כדי לעשות זאת, עליך ליצור מסלול חדש עם הנתיב מוגדר ל-"*" ולעבד את רכיב ה-NotFound שלך.

לדוגמה:

} />

זה יתאים לכל כתובת אתר שעדיין אינה מתאימה למסלול קיים ותציג את רכיב ה-NotFound שלך.

איך אני מכריח דף מגיב להיטען מחדש

ב-React Router, אתה יכול לאלץ דף להיטען מחדש על ידי שימוש בשיטת החלפה באובייקט ההיסטוריה. זה יחליף את הערך הנוכחי בערימת ההיסטוריה בחדש, ובכך יאלץ טעינה מחדש של הדף. כדי להשתמש בשיטה זו, תחילה עליך לקבל גישה לאובייקט ההיסטוריה. אתה יכול לעשות זאת על ידי העברת זה כאביזר בעת יצירת רכיב הנתב שלך:

const AppRouter = () => (

{/* המסלולים שלך כאן */}

);

לאחר שתהיה לך גישה לאובייקט ההיסטוריה, תוכל להשתמש בשיטת ההחלפה שלו כך:

history.replace('/some-route');