A React Router egy szabványos könyvtár a React útválasztáshoz. Lehetővé teszi a navigációt a React alkalmazás különböző összetevőiből származó nézetek között, lehetővé teszi a böngésző URL-címének módosítását, és szinkronban tartja a felhasználói felületet az URL-lel.
A React Router működésének megértéséhez hozzunk létre egy egyszerű alkalmazást a React számára. Az alkalmazás tartalmazza az otthoni, a névjegy és a kapcsolati összetevőket. A React Routert fogjuk használni az összetevők közötti navigáláshoz.
npx Create-React-app
A fejlesztői környezeted készen áll. Most telepítsük a React Routert az alkalmazásunkba.
React Router : A React Router az npm-en keresztül telepíthető a React alkalmazásba. Kövesse az alábbi lépéseket az útválasztó beállításához a React alkalmazásban:
1. lépés: CD a projektkönyvtárban, pl ., java.
2. lépés: A React Router telepítéséhez használja a következő parancsot:
npm install - -save react-router-dom
A react-router-dom telepítése után adja hozzá az összetevőit a React alkalmazáshoz.
React Router komponensek hozzáadása:
A React Router fő összetevői a következők:
escape karakter java
A soros bejárás helyett az útvonalak kiválasztása a legjobb egyezés alapján történik.
Ha React Router összetevőket szeretne hozzáadni az alkalmazáshoz, nyissa meg a projektkönyvtárat a használt szerkesztőben, és nyissa meg az app.js fájlt. Most adja hozzá az alábbi kódot az app.js fájlhoz.
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom'; Megjegyzés: A BrowserRouter neve Router.
A React Router használata: A React Router használatához először hozzunk létre néhány összetevőt a React alkalmazásban. A projektkönyvtárban hozzon létre egy összetevő nevű mappát az src mappában, és adjon hozzá 3 home.js, about.js és contact.js nevű fájlt az összetevők mappájába.
Adjunk hozzá néhány kódot a 3 komponensünkhöz:
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; Most vegyük bele a React Router összetevőit az alkalmazásba:
BrowserRouter : Adjon hozzá egy alias BrowserRoutert útválasztóként az app.js fájlhoz az összes többi összetevő becsomagolásához. A BrowserRouter szülőkomponens, és csak egy gyermeke lehet.
class App extends Component { render() { return ( ); } } Linkek: Most hozzuk létre az összetevőink hivatkozásait. A Link komponens kellékek segítségével írja le azt a helyet, ahová a hivatkozásnak el kell navigálnia.
<ul> <li> Home </li> <li> About Us </li> <li> Contact Us </li> </ul>
Most futtassa az alkalmazást a helyi gazdagépen, és kattintson a létrehozott hivatkozásra. Észre fogja venni, hogy az URL-címek a linkkomponens értékének megfelelően változnak.
Útvonal : Az útvonal összetevő segít létrehozni a kapcsolatot az összetevő felhasználói felülete és az URL között. Az útvonal alkalmazásba való felvételéhez adja hozzá az alábbi kódot az app.js fájlhoz.
<route exact path="/" element="{}"> <route exact path="/about" element="{}"> <route exact path="/contact" element="{}"> </route></route></route> Az összetevők csatlakoztatva vannak, és bármely hivatkozásra kattintva megjelenik a megfelelő összetevő. Most próbáljuk megérteni a gyökérkomponenshez kapcsolódó kellékeket.
- Az elem arra az összetevőre utal, amely akkor jelenik meg, ha az elérési út egyezik.
Megjegyzés: Alapértelmezés szerint az útvonalak magukba foglalják, ami azt jelenti, hogy egynél több útvonal-összetevő egyezhet egy URL-útvonallal és egyszerre jelenhet meg. Ha egyetlen komponenst szeretnénk renderelni, akkor itt útvonalakat kell használnunk.
Útvonalak : Egyetlen összetevő olvasásához csomagolja be az összes útvonalat az Útvonalak komponensbe.
<route exact path="/" element="{}"> <route exact path="/about" element="{}"> <route exact path="/contact" element="{}"> </route></route></route> Váltson csoportokat több útvonalon, iteráljon rajtuk, és keresse meg az elsőt, amelyik megfelel az útvonalnak. Így az elérési út megfelelő komponense kerül megjelenítésre.
Íme a teljes forráskódunk az összes összetevő hozzáadása után:
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> Most rákattinthat a hivatkozásra, és navigálhat a különböző összetevők között. A React Router szinkronban tartja az alkalmazás felhasználói felületét az URL-lel.
Végül sikeresen megvalósítottuk a navigációt a React alkalmazásunkban a React Router segítségével.
A, amely a HTML5 előzmény API-t (pushstate, helyettesítő állapot és popstate események) használja, hogy a felhasználói felületet szinkronban tartsa az URL-lel.
alapnév: string
Alap URL az összes helyhez. Ha az alkalmazást a szerver egy alkönyvtárából szolgálják ki, akkor abba az alkönyvtárba kell beállítani. A megfelelően formázott alapnévnek tartalmaznia kell egy kezdő perjelet, de nem tartalmazhat perjelet a végén.
// renders // renders <a href="tmp//calendar/tomorrow"> ... </a>
getUserConfirmation: func
A navigáció megerősítésére használható funkció. Alapértelmezésben a window.confirm használata.
{ // this is the default behavior const allowTransition = window.confirm(message); callback(allowTransition); }} /> forceRefresh: bool
Ha igaz, akkor a router teljes oldalas frissítést használ az oldalon. Használhatja ezt arra, hogy utánozza, hogyan működne egy hagyományos szerver által megjelenített alkalmazás az oldalnavigáció közötti teljes oldal frissítésekkel.
keyLength: szám
szalmán kán kán kor
A helyszín hossza. Kulcs. Alapértelmezés szerint 6.
gyerekek: csomópont- megjelenítendő gyermekelem.
Megjegyzés: A React esetén egyetlen gyermekelemet kell használnia, mert a renderelési módszer nem adhat vissza egynél több elemet. Ha egynél több elemre van szüksége, megpróbálhatja becsomagolni őket egy további vagy .
A, amely az URL hash részét (azaz window.location.hash) használja, hogy a felhasználói felületet szinkronban tartsa az URL-lel.
Megjegyzés: a hash nem támogatja az előzmények helyét. Kulcs vagy hely. Állapot. A korábbi verziókban megpróbáltuk csökkenteni a viselkedést, de voltak szélső esetek, amelyeket nem tudtunk megoldani. Az ilyen viselkedést igénylő kódok vagy bővítmények nem működnek.
Mivel ezt a technológiát csak a régebbi böngészők támogatására tervezték, javasoljuk, hogy helyette állítsa be szerverét úgy, hogy ezzel működjön együtt.
alapnév: string
Az összes hely alap URL-je. A megfelelően formázott alapnévnek kezdő perjelnek kell lennie, de a végén perjelnek nem kell lennie.
// renders <a href="#/calendar/today"> </a>
getUserConfirmation: func
A navigáció megerősítésére használható funkció. Alapértelmezésben a window.confirm használata.
{ // this is the default behavior const allowTransition = window.confirm(message); callback(allowTransition); }} /> hashType: string
A kódoláshoz használt window.location.hash . Az elérhető értékek a következők:
- 'slash' – olyan hash-eket hoz létre, mint a #/ és a #/sunshine/nyalókák
- 'noslash' - # és #sunshine/nyalóka . ahogy a hash létrehozza
- „hashbang” – „ajax crawlable” (a Google által elavult) kivonatokat hoz létre, például #!/ és #!/sunshine/lollipops
Alapértelmezés szerint „perjel”.
gyerekek: csomópont
Egyetlen gyermekelem a megjelenítésre.
Deklaratív, hozzáférhető navigációt biztosít az alkalmazás körül.
About
to: string
A hivatkozás helyének karakterlánc-ábrázolása a hely elérési útnevének, keresési és hash tulajdonságainak kombinálásával jön létre.
Egy objektum, amely a következő tulajdonságok bármelyikével rendelkezhet:
to: func
Olyan függvény, amelyben az aktuális hely argumentumként kerül átadásra, és amelynek karakterláncként vagy objektumként kell visszaadnia a helyábrázolást.
({ ...location, pathname: '/courses' })} /> `${location.pathname}?sort=name`} /> csere: bool
Ha igaz, a Hivatkozásra kattintva lecseréli az aktuális bejegyzést ahelyett, hogy újat adna hozzá
entry to the history stack.
belső ref: func
A React Router 5.1-től kezdve, ha React 16-ot használ, nincs szüksége erre a kellékre, mivel továbbítjuk a hivatkozást a mögöttes . Használj helyette normál ref-t.
Lehetővé teszi a hozzáférést az összetevő beépített ref.
{ // `node` refers to the mounted DOM element // or null when unmounted }} /> innerRef: RefObject
govinda színész
A React Router 5.1-től kezdve, ha React 16-ot használ, nincs szüksége erre a támasztékra, mert továbbítjuk a hivatkozást a mögöttesnek . Használj helyette normál ref-t.
Szerezze be az összetevő mögöttes hivatkozását a React.createRef segítségével.
let anchorRef = React.createRef()
komponens: React.Component
Ha saját navigációs komponensét szeretné használni, ezt úgy teheti meg, hogy átadja azt a komponens támasztékán.
const FancyLink = React.forwardRef(({ navigate, ...props }, ref) => { return ( <a ref="{ref}" {...props} onclick="{handleClick}">💅 {props.children} ) }) </a> Átadhatja azokat a kellékeket is, amelyeken szeretne lenni például cím, azonosító, osztálynév stb.
Ennek egy speciális változata stílusattribútumokat ad a megjelenített elemhez, ha az megegyezik egy meglévő URL-lel.
About
osztálynév: string | func
Az osztálynév lehet egy karakterlánc vagy egy karakterláncot visszaadó függvény. Ha a className függvényt használja, akkor a hivatkozás aktív állapota paraméterként kerül átadásra. Ez akkor hasznos, ha kizárólag egy osztálynevet szeretne alkalmazni egy inaktív hivatkozásra.
'nav-link' + (!isActive ? ' unselected' : '') } >
GYIK
A React Router v6-ban az activeClassName el lesz távolítva, és a className függvényt kell használnia az osztálynév alkalmazásához az aktív vagy inaktív NavLink összetevőkre.
ActiveClassName: Karakterlánc
osztályt, hogy megadja az elemet, amikor az aktív. Az alapértelmezett adott osztály aktív. Az osztálynév kellékkel kombinálva lesz.
stílus: tárgy | func
A stílus lehet egy React.CSSSProperties objektum vagy egy stílusobjektumot visszaadó függvény. Függvénystílus használata esetén a hivatkozás aktív állapota paraméterként kerül átadásra.
({ color: isActive ? 'green' : 'blue' })} > A React Router v6-ban az aktív stílus törlődik, és a függvénystílust kell használnia a soron belüli stílusok alkalmazásához az aktív vagy inaktív NavLink összetevőkre.
Aktív stílus: objektum
Az aktív elemre alkalmazott stílusok.
<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> szigorú: bool
Ha igaz, akkor a hely elérési útjának záró perjelét a rendszer figyelembe veszi annak meghatározásakor, hogy a hely egyezik-e az aktuális URL-lel. További részletekért lásd a dokumentációt.
Events
isActive: func
Funkció, amely további logikát ad hozzá annak meghatározásához, hogy a kapcsolat aktív-e. Ezt akkor kell használni, ha többet szeretne tenni, mint ellenőrizni, hogy a hivatkozás elérési útja megegyezik-e az aktuális URL elérési útjával.
{ 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 hely: objektum
isActive Összehasonlítja az aktuális előzmények helyével (általában a böngésző aktuális URL-jével).
ária-áram: húr
Az aktív hivatkozáson használt area-current attribútum értéke. Az elérhető értékek a következők:
- „oldal” – az oldalszámozási hivatkozások halmazán belüli hivatkozás jelzésére szolgál
- „Lépések” – a lépés alapú folyamat lépésjelzőjén belüli hivatkozás jelzésére szolgál
- „hely” – a folyamatábra aktuális összetevőjeként vizuálisan kiemelt kép jelzésére szolgál
- „dátum” – az aktuális dátum jelzésére szolgál a naptárban
- „idő” – a menetrenden belüli aktuális idő jelzésére szolgál
- 'igaz' – azt jelzi, hogy a NavLink aktív-e
- „hamis” – arra szolgál, hogy megakadályozza, hogy a kisegítő technológiák reagáljanak az aktuális linkre (az egyik felhasználási eset az lenne, ha egy oldalon több terület-aktuális címke is megakadályozható lenne)