ריאקט ראוטר - מדריך בסיס

אפליקציית ריאקט טיפוסית היא Single Page Application - דף HTML אחד בלבד שריאקט "מציג" בתוכו תוכן שונה, בלי לטעון דף חדש מהשרת בכל פעם. אבל משתמשים עדיין מצפים להתנהג כמו באתר רגיל - כתובת URL שמשקפת איפה הם נמצאים, כפתור "אחורה" שעובד, ואפשרות לשתף קישור לעמוד ספציפי. react-router הוא הספרייה הסטנדרטית שנותנת את כל זה בתוך אפליקציית ריאקט.

למה לא סתם להשתמש בקישורי HTML רגילים

תגית a רגילה גורמת לדפדפן לטעון דף חדש לגמרי מהשרת - כל ה-JavaScript נטען מחדש, כל ה-state נאבד, וההרגשה איטית. react-router מיירט את הניווט, ומחליף רק את התוכן הרלוונטי בתוך הדף, בלי טעינה מחדש - זה מה שנותן לאפליקציות ריאקט את התחושה המהירה של אפליקציה, לא של אתר עם דפים נפרדים.

הגדרה בסיסית - BrowserRouter, Routes ו-Route

import { BrowserRouter, Routes, Route } from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/products" element={<Products />} />
      </Routes>
    </BrowserRouter>
  );
}

BrowserRouter עוטף את כל האפליקציה ומאפשר לה להשתמש בניתוב. Routes מחזיק את כל המסלולים האפשריים, ו-Route מגדיר איזו קומפוננטה להציג לכל נתיב URL. ריאקט ראוטר בודק את הכתובת הנוכחית, ומרנדר רק את הקומפוננטה של המסלול המתאים.

Link - ניווט בלי רענון

במקום תגית a רגילה, react-router מספק קומפוננטת Link שמונעת רענון דף:

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

function Navbar() {
  return (
    <nav>
      <Link to="/">בית</Link>
      <Link to="/about">אודות</Link>
      <Link to="/products">מוצרים</Link>
    </nav>
  );
}

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

פרמטרים בכתובת - useParams

הרבה עמודים תלויים בערך משתנה בכתובת עצמה, למשל עמוד מוצר ספציפי:

<Route path="/products/:productId" element={<ProductPage />} />

בתוך ProductPage, קוראים ל-useParams כדי לקבל את הערך שהיה בכתובת בפועל:

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

function ProductPage() {
  const { productId } = useParams();

  useEffect(() => {
    fetch(`/api/products/${productId}`)
      .then((res) => res.json())
      .then((data) => setProduct(data));
  }, [productId]);

  return <h1>מוצר מספר {productId}</h1>;
}

אם המשתמש נכנס ל-/products/42, useParams מחזיר { productId: "42" }.

ניווט מתוך קוד - useNavigate

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

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

function LoginForm() {
  const navigate = useNavigate();

  async function handleSubmit(event) {
    event.preventDefault();
    const success = await login();
    if (success) {
      navigate("/dashboard");
    }
  }

  return <form onSubmit={handleSubmit}>...</form>;
}

useNavigate מחזיר פונקציה שאפשר לקרוא לה בכל מקום בקוד כדי לשנות עמוד, ללא תלות בלחיצת עכבר על קישור.

עמוד לא נמצא - route של 404

אפשר להגדיר מסלול "כללי" שתופס כל כתובת שלא הותאמה לאף מסלול אחר, בעזרת *:

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/about" element={<About />} />
  <Route path="*" element={<NotFound />} />
</Routes>

חשוב שה-route הזה יהיה אחרון ברשימה, כי react-router בודק לפי סדר, והוא ייתפס בכל דבר אחר שקדם לו.

מסלולים מקוננים - layout משותף

react-router מאפשר גם "לקנן" מסלולים כדי לשתף מבנה עמוד משותף, כמו תפריט צד או כותרת, בין כמה עמודים:

<Routes>
  <Route path="/dashboard" element={<DashboardLayout />}>
    <Route path="overview" element={<Overview />} />
    <Route path="settings" element={<Settings />} />
  </Route>
</Routes>

DashboardLayout מכיל בתוכו <Outlet /> - מקום שבו התוכן של תת-המסלול הנוכחי מוצג, בעוד שאר הפריסה (תפריט, כותרת) נשארת קבועה.

למה זה חיוני לכל פרויקט ריאקט אמיתי

כמעט כל אפליקציה עם יותר מעמוד אחד צריכה ניתוב, ו-react-router הוא הבחירה הדומיננטית בקהילת ריאקט לפתור את זה. להבין את הבסיס - Routes, Route, Link, useParams, useNavigate - נותן לכם את מה שצריך כדי לבנות כמעט כל מבנה ניווט שתפגשו.

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

לסיכום

react-router נותן ניווט בצד לקוח בלי רענון דף, עם BrowserRouter, Routes ו-Route להגדרת מסלולים, Link לניווט דרך לחיצה, ו-useParams ו-useNavigate לעבודה עם פרמטרים וניווט מתוך קוד. זה כלי בסיסי שכל אפליקציית ריאקט עם יותר מעמוד אחד צריכה.

תקועים עם route שלא עובד כמו שציפיתם? תשתפו בדיסקורד.

הצטרפו לקהילה בדיסקורד