כיצד להשתמש ב-React Router V6: מדריך למתחילים

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

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

תחילת העבודה עם ניתוב באמצעות React Router V6

להתחיל, ליצור אפליקציית React. לחלופין, הגדר פרויקט React באמצעות Vite. לאחר יצירת הפרויקט, המשך והתקן את תגובה-נתב-דום חֲבִילָה.

npm install react-router-dom

יצירת מסלולים באמצעות נתב React

כדי ליצור מסלולים, התחל על ידי גלישת האפליקציה כולה עם א נתב דפדפן רְכִיב. עדכן את הקוד שלך index.jsx אוֹ main.jsx קובץ באופן הבא:

import React from'react'
import ReactDOM from'react-dom/client'
import App from'./App.jsx'
import { BrowserRouter as Router } from'react-router-dom';
ReactDOM.createRoot(document.getElementById('root')).render(



 </Router>
 </React.StrictMode>,
)

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

שימוש ברכיב המסלולים

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

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

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

פתח את ה App.jsx קובץ והחלף את קוד ה-boilerplate React בקוד הבא:

import'./App.css'
import { Routes, Route } from'react-router-dom';
import Dashboard from'./pages/Dashboard';
import About from'./pages/About';
functionApp() {
return (
 <>

"/" element={} />
"/about" element={} />
 </Routes>
 </>
 )
}
exportdefault App

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

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

בתוך ה src ספרייה, צור חדש דפים ספרייה, והוסף שני קבצים חדשים: Dashboard.jsx ו About.jsx. קדימה, הגדר רכיבים פונקציונליים בתוך קבצים אלה כדי לבדוק את המסלולים.

שימוש ב- createBrowserRouter כדי להגדיר מסלולים

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

על ידי שימוש ברכיב זה, אין צורך להגדיר את המסלולים שלך בתוך רכיב האפליקציה. במקום זאת, אתה יכול לשרטט את כל תצורות המסלול שלך בתוך index.jsx אוֹ main.jsx קוֹבֶץ.

הנה דוגמה לאופן שבו אתה יכול להשתמש ברכיב זה:

import React from'react'
import ReactDOM from'react-dom/client'
import { createBrowserRouter, RouterProvider } from"react-router-dom";
import App from'./App.jsx'
import Dashboard from'./pages/Dashboard';
import About from'./pages/About';
const router = createBrowserRouter([
 {
 path: "/",
 element: <App />,
 },
 {
 path: "/dashboard",
 element: <Dashboard />,
 },
 {
 path: "/about",
 element: <About />,
 },
]);
ReactDOM.createRoot(document.getElementById("root")).render(


 </React.StrictMode>
);

תצורת הניתוב משתמשת ב- createBrowserRouter ו ספק נתב רכיבים ליצירת מערכת ניתוב עבור אפליקציית React.

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

יישום מסלולי דף לא נמצא

ה נָתִיב prop ברכיב Route משווה את הנתיב שסופק לכתובת ה-URL הנוכחית כדי לקבוע אם יש התאמה לפני עיבוד הרכיב הנדרש.

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

כדי ליישם מסלול 404, הוסף מסלול זה בתוך רכיב המסלולים:

// using the Route component
"*" element={} /> 
// using createBrowserRouter
{ path: "*", element: <NotFound />, },

לאחר מכן, צור מותאם אישית NotFound.jsx רכיב ולבסוף, לעצב את הרכיב באמצעות מודולי CSS.

הכוכבית (*) היא תו כללי המטפל בתרחישים שבהם אף אחד מהמסלולים שצוינו לא תואם לכתובת האתר הנוכחית.

ניווט פרוגרמטי שימוש ב-useNavigate Hook

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

בואו נסתכל כיצד להשתמש ב- useNavigate וו לניווט פרוגרמטי. בהנחה שיצרת את About.jsx רכיב פונקציונלי, ייבא את הוו מחבילת React Router:

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

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

functionAbout() {
const navigate = useNavigate();
const handleButtonClick = () => {
 navigate("/");
 };
return (
 <>
// Rest of the code ...

 </>
 );
}
exportdefault About;

ראוי להזכיר כי ה-useNavigate ו-useNavigation hook, שהוצגו ב-React Router v6, משרתים מטרות שונות למרות השמות הקשורים ביניהם.

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

הנה דוגמה לאופן שבו אתה יכול להשתמש ב-useNavigation Hook.

import { useNavigation } from"react-router-dom";
functionSubmitButton() {
const navigation = useNavigation();
const buttonText =
 navigation.state "submitting"
? "Saving..."
: navigation.state "loading"
? "Saved!"
: "Go";
return<buttontype="submit">{buttonText}button>;
}

בדוגמה זו, ה SubmitButton הרכיב יעדכן באופן דינמי את הטקסט שלו בהתבסס על מצב הניווט המתקבל מה-useNavigation Hook.

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

שימוש ב-useRoutes Hook

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

להלן דוגמה פשוטה כיצד להשתמש בוו:

import { useRoutes } from'react-router-dom';
import Dashboard from'./Dashboard';
import About from'./About';
const routes = [
 {
 path: '/',
 element: <Dashboard/>,
 },
 {
 path: '/about',
 element: <About />,
 },
];
functionApp() {
const routeResult = useRoutes(routes);
return routeResult;
}
exportdefault App;

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

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

טיפול בניתוב ביישומי React

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