לפעמים יש לך רק 5 דקות פנויות. במקום לבזבז את זה ברשתות החברתיות, בואו נקבל מבוא של 5 דקות ל- React-Router! במדריך זה נלמד את יסודות הניתוב ב- React על ידי בניית ניווט לאתר חנות סריגה של Scrimba. זה לא אמיתי, אבל אולי יום אחד ...;)

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

מה זה בכלל תגובה-נתב?

אתרים מודרניים רבים מורכבים למעשה מדף אחד, הם פשוט נראים כמו עמודים מרובים מכיוון שהם מכילים רכיבים המופיעים בדפים נפרדים. אלה בדרך כלל מכונים ספא - ים ingle- p גיל pplications. ביסודו, מה ש- React Router עושה הוא לתלות רכיבים מסוימים להצגה בהתאם למסלול בו משתמשים בכתובת האתר ( לדף הבית, לדף אודות וכו ').//about

לדוגמא, אנו יכולים להשתמש בנתב React לחיבור www.knit-with-scrimba.com/ אל www.knit-with-scrimba.com/about או www.knit-with-scrimba.com/shop

נשמע מצוין - איך אוכל להשתמש בו?

כדי להשתמש בנתב תגובה, ראשית עליך להתקין אותו באמצעות NPM:

npm install react-router-dom 

לחלופין, אתה יכול פשוט להשתמש במגרש המשחקים הזה ב- Scrimba, שבו הקוד שהושלם כבר כתוב.

יהיה עליך לייבא את BrowserRouter, מסלול ומעבר react-router-domמחבילה:

import React, { Component } from 'react'; import { BrowserRouter, Route, Switch } from 'react-router-dom'; 

בדוגמה שלי, אני מקשר את דף הנחיתה עם שני "עמודים" אחרים (שהם למעשה רק רכיבים) שנקראים Shopו- About.

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

// index.js ReactDOM.render(   , document.getElementById('root') ) 

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

function App() { return (     ) } 

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

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

כתובות אתרים רבות של דף הבית הן שם האתר ואחריו "/", למשל, www.knit-with-scrimba.com/ . במקרה זה, אנו מוסיפים exactלתג המסלול. הסיבה לכך היא שכתובות ה- URL האחרות מכילות גם "/", כך שאם אנחנו לא אומרים לאפליקציה שהיא צריכה לחפש רק /, היא טוענת את הראשונה שתתאים למסלול, ואנחנו מקבלים באג די מסובך להתמודד איתו.

function App() { return (        ) } 

כעת ייבא את הרכיבים לאפליקציה. ייתכן שתרצה שיהיה בתיקיית "רכיבים" נפרדת כדי לשמור על קוד נקי וקריא.

import Home from './components/Home'; import About from './components/About'; import Shop from './components/Shop'; 

על אותה הודעת שגיאה שהזכרתי קודם, והיא נטענת אם משתמש מקליד כתובת URL שגויה. זה בדיוק כמו תג רגיל , אך ללא נתיב. רכיב השגיאה מכיל

Oops! Page not found!

. אל תשכח לייבא אותו לאפליקציה.

function App() { return (         ) } 

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

כעת הוסף a Linkעבור כל רכיב באפליקציה והשתמש to="URL"בקישור ביניהם.

function Navbar() { return ( Home  About Us  Shop Now ); }; 

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

סיכום

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

למידע נוסף על React Hooks ותכונות נהדרות אחרות של React, תוכל להצטרף לרשימת ההמתנה לקורס ה- React המתקדם שלי.

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

קידוד שמח;)