React Router

6
9869

ראוטינג הוא ניווט בין "עמודים" בתוך האפליקציה שלנו,כמובן שהם לא ״עמודים״ אמיתיים, מכיוון שמדובר ב- SPA(אפליקציה שהיא בעצם דף אחד), אבל מבחינת המשתמש זה נראה שכן. מכיוון שאיננו טוענים דפים חדשים מהשרת, איננו יכולים להשתמש בניווט הדפדפן הרגיל אלא צריכים לספק בעצמנו את ה״דפים״.​​
ריאקט לא מגיעה עם ראוטר מובנה, אך אנו יכולים להשיג ראוטינג עם הספריה React-router-dom.

React-router-dom

תחילה ניצור פרוייקט חדש דרך הפקודה הבאה בטרמינל

כעת, לאחר שיצרנו פרוייקט חדש, נתקין את חבילת הראוטינג שבה נשתמש react-router-dom באמצעות הפקודה

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

Browser Router

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

BrowserRouter – מייצר כתובות אתרים כמו שככל הנראה נרצה mydomain.com/about.
HashRouter – מייצר כתובות אתרים עם האשטאג (hashtag,#) שייראו כמו example.com/#/about.

בדוגמא שלנו נשתמש ב BrowserRouter​ נפתח את הפרוייקט ונערוך את הקובץ index.js

Route and Switch

כעת לאחר שעטפנו את כל האפליקציה שלנו ב- BrowserRouter, אנו יכולים להשתמש בשאר היכולות של הראוטר שלנו. שלב ראשון שנעשה הוא לחשוב ולהחליט איזה נתיבים נרצה שיהיו לנו באפליקציה ולאחר מכן נשתמש ב- Route ו- Switch לממש אותם.

Route – נתיב יחיד ופרטני.​
Switch – מקבץ את כל הראוטים (Routes) שלנו יחדיו והם יקבלו עדיפות מלמעלה למטה לפי הסדר שנשים אותם.

כדי להשתמש ביכולות אלה בקוד שלנו תחילה נצטרך לייבא אותם

בואו נראה דוגמא של איך יראה App.js לאחר שהוספנו לו שני ראוטים

בדוגמא הנל אנו רואים שיש לנו 2 ראוטים ואם נריץ את הפרוייקט נגיע ישירות לקומפוננטה Home ואם נוסיף about/ ל-url אז נגיע לעמוד אודות אך יש לשים לב שאלו הם ראוטים סטטים וכולם רלטיביים. יהיו מצבים שבהם נרצה url דינמי ולהעביר לו משתנים, לדוגמא עמוד ״משתמש״ שבו נרצה להציג תמיד את אותו עמוד רק עם תוכן שונה לפי מזהה id.
כך נרשום את הראוט שימו לב שמה שרשום כ "userId:" זהו בעצם המשתנה שלנו. 

אחרי שהוספנו את הראוט הנל נוכל לגשת אליו למשל עי ה-url:
www.mydomain.com/users/453635
בעת מעבר לקומפוננטה של משתמש בדוגמא שלנו נרצה לקחת את המזהה של אותו משתמש ולעשות קריאת api ולהביא את המידע שלו. אז איך בעצם מגיעים למזהה נראה בדוגמא הבאה

exact

נתחיל מדוגמא פשוטה כדי שנוכל להבין מה בדיוק המשמעות של exact ולמה הוא נועד

כשאנו מנסים לגשת אל https://mydomain.com/users הראוטר יעבור על כל הראוטים המוגדרים שלנו ויחזיר את ההתאמה הראשונה שהוא מוצא.  במקרה הזה אין ממש בעיה, הוא ימצא קודם את הראוט users ויחזיר לנו אותו.

אבל אם היינו רוצים להגיע למשתמש למשתמש ספציפי דרך הכתובת https://mydomain.com/users/34743, הראוטר היה עובר שוב על כל הראוטים המוגדרים שלנו ומחזיר את ההתאמה הראשונה שהוא היה מוצא. הראוטר עושה התאמה חלקית בחיפוש כלומר users/ מתאים ל /users/4474 באופן חלקי, כך שזה יחזיר באופן שגוי את הראוט – users. ולכן כך אנחנו אמורים להגדיר את הראוטים שלנו במצב הזה(להוסיף exact בראוט של users)

404

מכיוון שהראוטר שלנו עושה התאמה חלקית לראוטים ומכיוון שהוא בודק מלמעלה למטה אז הראוט האחרון שנשים בתוך ה- switch בעצם יוביל לדף 404 (אנחנו ניצור קומפוננטה שתתאר דף כזה)

Link

עד עכשיו למדנו איך לייצר את הראוטים באפליקציה שלנו אבל איך מתבצע הניווט בתוך האפליקציה? כדי לקשר לדף אנחנו נשתמש ב-  Link ​. אם היינו משתמשים ב <a href="/route">, הייתה מתבצעת בקשה חדשה וטוענת מחדש את הדף(שזהו לא המצב הרצוי). שימו לב שגם את Link יש לייבא ראשית כדי שנוכל להשתמש בו.הגיע הזמן לראות איך נשתמש ב Link

מה שנעביר ב- to  זה מה שיועבר ל-url ואז יתבצע חיפוש בראוטר שלנו ונגיע לדף המבוקש. יש לנו את האופציה גם להעביר פרמטרים דרך LINK. נגיע לפרמטרים אלו דרך Location. רגע מה זה בכלל?

Location

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

בואו נראה שילוב של Link שמעביר מידע ואיך נגיע אליו דרך location

אם נדפיס את location לקונסול אחרי שנעבור לדף ה״חדש״ זה מה שנראה

שימוש נוסף לאובייקט ה-location הוא בדיקה אם ה-pathname השתנה, במידה וכן נוכל להחליט לבצע קריאה מחדש של API, שינוי סטייט, הצגת אזהרה למשתמש או כל מה שנבחר לעשות.

 

סיכום

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

  • Browser Router- כל האפליקציה שלנו תעטף ב-Browser Router
  • Route and Switch​- יצירת הנתיבים/ראוטים שלנו באפליקציה ונתינת חשיבות לראוטים
  • Link- מתנהג כמו תגית a אך לא גורם לרדנור מחדש של הדף
  • match- קבלת פרמטרים מה-url.       
    (match הוא אובייקט שניתן לדעת דרכו עוד דברים)
  • location- נקבל מידע על היכן אנחנו נמצאים או היינו לפני וקבלת פרמטרים דרך Link

אם אהבתם את המאמר אשמח אם תשתפו/תמליצו לאחרים, אם יש לכם שאלות או הערות תוכלו להשאיר אותם בתגובות מתחת.

6 תגובות

להגיב על Omer בטל תגובה

Please enter your comment!
Please enter your name here