נפתרה: להעביר נתונים לנווט להגיב נתב dom

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

import { useHistory } from "react-router-dom";

const MyComponent = () => {
  const history = useHistory();

  const handleClick = (data) => {
    history.push({ pathname: '/myroute', state: data }); // pass data to route as state object
  };

  return (
    <button onClick={() => handleClick(data)}>Go to MyRoute</button>
  );
};

// שורה 1: שורה זו מייבאת את ה-useHistory hook מספריית react-router-dom.
// שורה 3: שורה זו מכריזה על קבוע בשם MyComponent שהיא פונקציה שמחזירה JSX.
// שורה 4: שורה זו מכריזה על קבוע שנקרא היסטוריה אשר מוקצה ל-useHistory hook המיובא מ-react-router-dom.
// שורה 6: שורה זו מכריזה על פונקציה בשם handleClick אשר לוקחת פרמטר אחד, נתונים.
// שורה 7: שורה זו משתמשת באובייקט ההיסטוריה כדי לדחוף נתיב חדש אל המחסנית עם שם הנתיב '/myroute' ונתוני מצב שהועברו כאובייקט.
// שורות 9 – 11: שורות אלו מחזירות JSX המכיל רכיב כפתור עם מטפל באירועים onClick שקורא ל-handleClick ומעביר נתונים כארגומנט.

React Router Dom

React Router DOM היא ספריית ניתוב עבור React המאפשרת למפתחים ליצור ולנהל מסלולים בתוך יישומי React שלהם. הוא מספק את רכיבי הליבה הדרושים לבניית יישומי אינטרנט מורכבים מרובי עמודים עם React, כולל רכיבים כגון Link, Route, Switch ו-BrowserRouter. הוא מספק גם תכונות כגון התאמת מסלול דינמי ומעקב אחר מיקום. עם React Router DOM, מפתחים יכולים ליצור בקלות יישומי עמוד בודד עם מספר תצוגות ומסלולים ללא צורך בניהול ידני של כתובת האתר או היסטוריית הדפדפן.

איך מעבירים נתונים דרך הניווט ב-react-router-Dom

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

const { היסטוריה } = this.props;
history.push({
שם נתיב: '/כמה/נתיב',
state: { someData: 'data' }
});