ראוטינג באפליקצית ריאקט

בפוסט הקודם למדנו איך בונים אפליקצית ריאקט. אבל זו לא אפליקציה אמיתית בלי ראוטינג. מה זה ראוטינג? כשאתם נכנסים לדף אחר (למשל פה באתר) והכתובת משתנה? האתר עשה ראוטינג. כלומר ניתוב לכתובת אחרת וטעינת הדפים. בוורדפרס ובאתרים ׳קלאסיים׳, הטעינה היא טעינה של כל הדף. באפליקצית ריאקט מדובר בניתוב שאינו דורש טעינה מחדש.

בניגוד לאתרים סטטיים שאנחנו מכירים, בריאקט (ובאנגולר למשל) אתה יכול לבחור איזו מערכת ראוטינג שאתה רוצה. כדי ללמד ולהתנסות אני אשתמש בראוטינג הפופולרי בשם… ריאקט ראוטר. לא נפלתם פה מהכסא, הא? מה שטוב בראוטינג הזה הוא הפשטות שלו. כדי לתרגל, אנחנו נבנה אפליקציה מורכבת שיש בה עמוד בית ועמוד אודות.

ראשית, אנו נייצר אפליקצית ריאקט באמצעות create react app. הדבר הבא הוא להתקין את הראוטר. לא, זה לא מסובך במיוחד. מדובר במודול node פשוט ביותר. נכנס ל-CMD ונקליד:

npm install react-router-dom --save

ה-save נועד כדי לשמור את ה-react-router-dom ב-package.json שזה ׳קובץ ההתקנות׳ שלנו. אחרי שעשינו את זה, אפשר להתחיל להשתמש בריאקט ראוטר. כן, זה עד כדי כך פשוט!

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

import React from 'react';
import { Switch, Route, Link } from 'react-router-dom';
import Home from './Home.jsx';
import About from './About.jsx';

class MainApp extends React.Component {
  render() {
    return <div>
      <nav>
        <ul>
          <li><Link to='/'>Home</Link></li>
          <li><Link to='/about'>About</Link></li>
        </ul>
      </nav>
      <h1>This is my App</h1>
      <main>
        <Switch>
          <Route exact path='/' component={Home} />
          <Route path='/about' component={About} />
        </Switch>
      </main>
    </div>
  }
}

export default MainApp;

יש כאן כמה קומפוננטות של הראוטר. הראשונה היא ה-main. בתוכה כל התוכן משתנה בהתאם לראוטינג שבחרנו. בתוך main יש את switch שבתוכה יש קומפוננטות Route. אחת לכל נציב כאשר הן כוללות בתוכן קומפוננות אחרות. הקומפוננטות האלו יטענו כאשר הנתיב ישתנה. איך נשנה את הנתיב? שימו לב לקומפוננטת Link שמקבלת תכונת to.

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

במאמר הבא נדון על בדיקות אוטומטיות.

⚠️אם אהבת את המדריכים על ריאקט – יש ספר מקיף ושלם על ריאקט שכתבתי בשם ללמוד ריאקט בעברית, במסגרת פרויקט עם חברות מובילות ומפתחים אחרים. בספר יש פירוט מקיף יותר על ריאקט ותרגילים רבים ללימוד עצמי.