React Router היא ספרייה סטנדרטית לניתוב ב-React. היא מאפשרת ניווט בין תצוגות ממרכיבים שונים באפליקציית React, מאפשרת לשנות את כתובת האתר של הדפדפן ושומרת על ממשק המשתמש מסונכרן עם כתובת האתר.
כדי להבין איך React Router עובד, בואו ניצור אפליקציה פשוטה עבור React. האפליקציה תכלול את רכיבי הבית, אודות ויצירת הקשר. אנו נשתמש ב-React Router כדי לנווט בין הרכיבים הללו.
npx create-react-app
סביבת הפיתוח שלך מוכנה. כעת נתקין את React Router באפליקציה שלנו.
נתב תגובה : ניתן להתקין את נתב React באפליקציית React שלך באמצעות npm. בצע את השלבים הבאים כדי להגדיר את הנתב באפליקציית React שלך:
שלב 1: תקליטור בספריית הפרויקט שלך, כלומר ., Java.
שלב 2: השתמש בפקודה הבאה כדי להתקין נתב React:
npm install - -save react-router-dom
לאחר התקנת react-router-dom, הוסף את הרכיבים שלו לאפליקציית React שלך.
הוספת רכיבי נתב React:
המרכיבים העיקריים של React Router הם:
במקום לעבור ברצף, מסלולים נבחרים על סמך ההתאמה הטובה ביותר.
כדי להוסיף רכיבי React Router לאפליקציה שלך, פתח את ספריית הפרויקט שלך בעורך שבו אתה משתמש ועבור לקובץ app.js. כעת, הוסף את הקוד שלהלן ל-app.js.
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom'; הערה: BrowserRouter מכונה בכינוי נתב.
שימוש בנתב React: כדי להשתמש ב-React Router, בואו ניצור תחילה כמה רכיבים באפליקציית React. בספריית הפרויקט שלך, צור תיקיה בשם רכיבים בתוך תיקיית ה-src והוסף כעת 3 קבצים בשם home.js, about.js ו-contact.js בתיקיית הרכיבים.
עוקף שיטה ב-java
הבה נוסיף קצת קוד לשלושת הרכיבים שלנו:
Home.js:
import React from 'react'; function Home (){ return } export default Home; About.js:
import React from 'react'; function About () { return <h2> jAVAtPOINT is a computer science portal for TUTORIALS!</h2> Read more about us at : <a href="https://www.javatpoint.in/about/"> https://www.javatpoint.in/about/ </a> } export default About; Contact.js:
import React from 'react'; function Contact (){ return You can find us here: <br> Javatpoint <br> G-13, second floor, Sector -3 Noida <br> Noida, Uttar Pradesh (201305) } export default Contact; כעת, בואו נכלול את רכיבי ה-React Router באפליקציה:
נתב דפדפן : הוסף BrowserRouter בעל כינוי כנתב לקובץ app.js שלך כדי לעטוף את כל שאר הרכיבים. BrowserRouter הוא רכיב אב ויכול להיות רק בן אחד.
class App extends Component { render() { return ( ); } } קישורים: הבה ניצור כעת את הקישורים של הרכיבים שלנו. רכיב הקישור משתמש באביזרים כדי לתאר את המיקום שאליו הקישור צריך לנווט.
<ul> <li> Home </li> <li> About Us </li> <li> Contact Us </li> </ul>
כעת, הפעל את היישום שלך על המארח המקומי ולחץ על הקישור שנוצר. תבחין שכתובות האתרים משתנות בהתאם לערך של רכיב הקישור.
מַסלוּל : רכיב המסלול יעזור לנו ליצור את הקישור בין ממשק המשתמש של הרכיב לכתובת ה-URL. כדי לכלול את המסלול באפליקציה, הוסף את הקוד שלהלן ל-app.js שלך.
<route exact path="/" element="{}"> <route exact path="/about" element="{}"> <route exact path="/contact" element="{}"> </route></route></route> הרכיבים מחוברים כעת, ולחיצה על כל קישור תציג את הרכיב המתאים. כעת ננסה להבין את האביזרים הקשורים לרכיב השורש.
- אלמנט מתייחס לרכיב שיעבד אם הנתיב תואם.
הערה: כברירת מחדל, מסלולים כוללים, מה שאומר שיותר מרכיב נתיב אחד יכול להתאים לנתיב כתובת URL ולעבד בו-זמנית. אם אנחנו רוצים לרנדר רכיב בודד, אנחנו צריכים להשתמש במסלולים כאן.
מסלולים : כדי לקרוא רכיב בודד, עטוף את כל המסלולים בתוך רכיב המסלולים.
<route exact path="/" element="{}"> <route exact path="/about" element="{}"> <route exact path="/contact" element="{}"> </route></route></route> החלף קבוצות על פני מספר מסלולים, חזור עליהם ומצא את הראשון שמתאים לנתיב. לפיכך, הרכיב המתאים של הנתיב מוצג.
להלן קוד המקור המלא שלנו לאחר הוספת כל הרכיבים:
import React, { Component } from 'react'; import { BrowserRouter as Router,Routes, Route, Link } from 'react-router-dom'; import Home from './component/home'; import Contact from './component/contact'; import About from './component/about'; import './App.css'; class App extends Component { render() { return ( <ul classname="App-header"> <li> Home </li> <li> About Us </li> <li> Contact Us </li> </ul> <route exact path="/" element="{}"> <route exact path="/about" element="{}"> <route exact path="/contact" element="{}"> ); } } export default App; </route></route></route> כעת, תוכל ללחוץ על הקישור ולנווט בין הרכיבים השונים. React Router שומר על ממשק המשתמש של האפליקציה שלך מסונכרן עם כתובת האתר.
לבסוף, הטמענו בהצלחה ניווט באפליקציית React שלנו באמצעות React Router.
A שמשתמש ב-HTML5 History API (אירועי Pushstate, replacestate ו-popstate) כדי לשמור על UI שלך מסונכרן עם כתובת האתר.
שם בסיס: מחרוזת
כתובת אתר בסיס לכל המיקומים. אם האפליקציה שלך מוגשת מספריית משנה בשרת שלך, תרצה להגדיר אותה לספריית משנה זו. שם בסיס מעוצב כהלכה חייב להכיל לוכסן מוביל, אך ללא קו נטוי.
// renders // renders <a href="tmp//calendar/tomorrow"> ... </a>
getUserConfirmation: func
פונקציה לשימוש כדי לאשר ניווט. ברירת המחדל לשימוש ב-window.confirm.
כיצד להמיר מספר שלם ל-Java מחרוזת
{ // this is the default behavior const allowTransition = window.confirm(message); callback(allowTransition); }} /> forceRefresh: bool
אם זה נכון, הנתב ישתמש בניווט בדף שלם של רענון. אולי תרצה להשתמש בזה כדי לחקות איך אפליקציה מסורתית המעובדת בשרת תעבוד עם רענון של עמוד שלם בין ניווט דפים.
keyLength: מספר
אורך המיקום. מַפְתֵחַ. ברירת המחדל היא 6.
ילדים: צומת- אלמנט ילד לעיבוד.
הערה: ב-React, עליך להשתמש ברכיב צאצא בודד מכיוון ששיטת הרינדור אינה יכולה להחזיר יותר מאלמנט אחד. אם אתה צריך יותר מאלמנט אחד, אתה יכול לנסות לעטוף אותם בתוספת או .
A שמשתמש בחלק ה-hash של כתובת ה-URL (כלומר, window.location.hash) כדי לשמור על ה-UI שלך מסונכרן עם ה-URL.
הערה: ה-hash אינו תומך במיקום ההיסטוריה. מפתח או מיקום. מדינה. בגרסאות קודמות, ניסינו לצמצם את ההתנהגות, אך היו מקרי קצה שלא הצלחנו לפתור. כל קוד או תוסף שדורשים התנהגות זו לא יפעלו.
מכיוון שטכנולוגיה זו נועדה לתמוך רק בדפדפנים ישנים יותר, אנו ממליצים לך להגדיר את השרת שלך לעבוד איתו במקום זאת.
שם בסיס: מחרוזת
כתובת האתר הבסיסית עבור כל המיקומים. שם בסיס מעוצב כהלכה צריך להיות לוכסן מוביל, אך ללא לוכסן נמשך.
// renders <a href="#/calendar/today"> </a>
getUserConfirmation: func
פונקציה לשימוש כדי לאשר ניווט. ברירת המחדל לשימוש ב-window.confirm.
{ // this is the default behavior const allowTransition = window.confirm(message); callback(allowTransition); }} /> hashType: מחרוזת
הקידוד המשמש עבור window.location.hash . הערכים הזמינים הם:
string n java
- 'סלאש' - יוצר hashes כמו #/ ו-#/sunshine/lollipops
- 'noslash' - # ו-#sunshine/lollipops . כפי שיוצר חשיש
- 'hashbang' - יוצר 'ajax ניתנים לסריקה' (הוצא משימוש על ידי גוגל) hashes כמו #!/ ו-#!/sunshine/lollipops
ברירת המחדל היא 'אלכסון'.
ילדים: צומת
רכיב בן יחיד לעיבוד.
מספק ניווט הצהרתי ונגיש סביב האפליקציה שלך.
About
ל: מחרוזת
ייצוג מחרוזת של מיקום קישור נוצר על ידי שילוב של שם הנתיב, החיפוש ומאפייני ה-hash של המיקום.
אובייקט שיכול להיות בעל כל אחד מהמאפיינים הבאים:
ל: func
פונקציה שבה המיקום הנוכחי מועבר כארגומנט ואשר חייבת להחזיר את ייצוג המיקום כמחרוזת או כאובייקט.
({ ...location, pathname: '/courses' })} /> `${location.pathname}?sort=name`} /> להחליף: bool
כאשר נכון, לחיצה על הקישור תחליף את הערך הנוכחי במקום להוסיף חדש
entry to the history stack.
ref פנימי: func
החל מ-React Router 5.1, אם אתה משתמש ב-React 16, אינך צריך להזדקק לאביזר הזה מכיוון שאנו מעבירים את השופט לבסיס . השתמש במקש רגיל במקום זאת.
מאפשר גישה ל-Ref המובנה של הרכיב.
{ // `node` refers to the mounted DOM element // or null when unmounted }} /> innerRef: RefObject
החל מ-React Router 5.1, אם אתה משתמש ב-React 16, אינך צריך להזדקק לאביזר הזה מכיוון שאנו מעבירים את השופט לבסיס . השתמש במקש רגיל במקום זאת.
קבל את ה-Ref הבסיסי של הרכיב באמצעות React.createRef.
let anchorRef = React.createRef()
רכיב: React.Component
אם תרצה להשתמש ברכיב הניווט שלך, תוכל לעשות זאת על ידי העברתו דרך אביזר הרכיב.
const FancyLink = React.forwardRef(({ navigate, ...props }, ref) => { return ( <a ref="{ref}" {...props} onclick="{handleClick}">💅 {props.children} ) }) </a> אתה יכול גם להעביר אביזרים שאתה רוצה להיות על כגון כותרת, מזהה, שם מחלקה וכו'.
גרסה מיוחדת של זה תוסיף תכונות סגנון לרכיב המעובד אם הוא תואם לכתובת URL קיימת.
About
className: מחרוזת | func
className יכול להיות מחרוזת או פונקציה שמחזירה מחרוזת. אם נעשה שימוש בפונקציה className, המצב הפעיל של הקישור מועבר כפרמטר. זה מועיל אם אתה רוצה להחיל באופן בלעדי className על קישור לא פעיל.
גראנדרה
'nav-link' + (!isActive ? ' unselected' : '') } >
שאלות נפוצות
ב-React Router v6, activeClassName יוסר ועליך להשתמש בפונקציה className כדי להחיל את שם הכיתה על רכיבי NavLink פעילים או לא פעילים.
ActiveClassName: מחרוזת
class לתת את האלמנט כשהוא פעיל. מחלקת ברירת המחדל הנתונה פעילה. זה ישולב עם אבזר שם הכיתה.
סגנון: אובייקט | func
סגנון יכול להיות אובייקט React.CSSProperties או פונקציה שמחזירה אובייקט בסגנון. אם נעשה שימוש בסגנון הפונקציה, המצב הפעיל של הקישור מועבר כפרמטר.
({ color: isActive ? 'green' : 'blue' })} > ב-React Router v6, הסגנון הפעיל יוסר, ואתה חייב להשתמש בסגנון הפונקציה כדי להחיל סגנונות מוטבעים על רכיבי NavLink פעילים או לא פעילים.
סגנון פעיל: אובייקט
הסגנונות שהוחלו על האלמנט כשהוא פעיל.
<navlink to="/faq" activestyle="{{" fontweight: 'bold', color: 'red' }} < pre> <h3>exact: bool</h3> <p>When true, the active class/style will only apply if the location is an exact match.</p> <pre> Profile </pre> <h3>strict: bool</h3> <p>If true, the trailing slash on a location's pathname will be considered when determining whether the location matches the current URL. See the documentation for more details.</p> <pre> Events </pre> <h3>isActive: func</h3> <p>A function to add additional logic to determine if the Link is active. This should be used when you want to do more than verify that the pathname of the Link matches the pathname of the current URL.</p> <pre> { if (!match) { return false; } // only consider an event active if its event id is an odd number const eventID = parseInt(match.params.eventID); return !isNaN(eventID) && eventID % 2 === 1; }} > Event 123 </pre> <h3>location: object</h3> <p>isActive Compares to the current history location (usually the current browser URL).</p> <h3>aria-current: string</h3> <p> <strong>The value of the area-current attribute used on the active Link. Available values are:</strong> </p> <ul> <li>'page' - used to indicate a link within a set of pagination links</li> <li>'Steps' - used to indicate a link within the step indicator for a step-based process</li> <li>'location' - used to indicate an image that is visually highlighted as the current component of the flow chart</li> <li>'date' - used to indicate the current date within the calendar</li> <li>'time' - used to indicate the current time within a timetable</li> <li>'true' - used to indicate whether NavLink is active</li> <li>'false' - used to prevent assistive technologies from reacting to the current Link (one use case would be to prevent multiple area-current tags on a page)</li> </ul> <hr></navlink> קפדן: bool
אם זה נכון, הקו האלכסון העוקב בשם הנתיב של מיקום ייחשב בעת קביעה אם המיקום תואם לכתובת האתר הנוכחית. עיין בתיעוד לפרטים נוספים.
Events
isActive: func
פונקציה להוספת לוגיקה נוספת כדי לקבוע אם הקישור פעיל. יש להשתמש בזה כאשר אתה רוצה לעשות יותר מאשר לוודא ששם הנתיב של הקישור תואם לשם הנתיב של כתובת האתר הנוכחית.
{ if (!match) { return false; } // only consider an event active if its event id is an odd number const eventID = parseInt(match.params.eventID); return !isNaN(eventID) && eventID % 2 === 1; }} > Event 123 מיקום: חפץ
isActive משווה למיקום ההיסטוריה הנוכחי (בדרך כלל כתובת האתר הנוכחית של הדפדפן).
aria-current: מחרוזת
הערך של תכונת area-current בשימוש בקישור הפעיל. הערכים הזמינים הם:
- 'עמוד' - משמש לציון קישור בתוך קבוצה של קישורי עימוד
- 'צעדים' - משמש לציון קישור בתוך מחוון הצעדים לתהליך מבוסס שלב
- 'מיקום' - משמש לציון תמונה המודגשת ויזואלית כרכיב הנוכחי של תרשים הזרימה
- 'תאריך' - משמש לציון התאריך הנוכחי בתוך לוח השנה
- 'זמן' - משמש לציון השעה הנוכחית בתוך לוח זמנים
- 'true' - משמש כדי לציין אם NavLink פעיל
- 'false' - משמש כדי למנוע מטכנולוגיות מסייעות להגיב לקישור הנוכחי (מקרה שימוש אחד יהיה מניעת מספר תגיות של אזור הנוכחי בדף)