React Router je štandardná knižnica pre smerovanie v Reacte. Umožňuje navigáciu medzi zobrazeniami z rôznych komponentov v aplikácii React, umožňuje zmenu adresy URL prehliadača a udržiava používateľské rozhranie synchronizované s adresou URL.
Aby sme pochopili, ako React Router funguje, vytvorme jednoduchú aplikáciu pre React. Aplikácia bude obsahovať komponenty home, about a contact. Na navigáciu medzi týmito komponentmi budeme používať React Router.
npx create-react-app
Vaše vývojové prostredie je pripravené. Poďme teraz nainštalovať React Router do našej aplikácie.
Reagovať Router : React Router je možné nainštalovať do vašej aplikácie React cez npm. Ak chcete nastaviť smerovač vo svojej aplikácii React, postupujte podľa nasledujúcich krokov:
Krok 1: CD vo vašom adresári projektu, t.j ., java.
Krok 2: Na inštaláciu smerovača React Router použite nasledujúci príkaz:
npm install - -save reagovat-router-dom
Po nainštalovaní React-router-dom pridajte jeho komponenty do aplikácie React.
Pridanie komponentov smerovača React:
Hlavné komponenty React Router sú:
Namiesto postupného prechádzania sa trasy vyberajú na základe najlepšej zhody.
Ak chcete do aplikácie pridať komponenty React Router, otvorte adresár projektu v editore, ktorý používate, a prejdite do súboru app.js. Teraz pridajte nižšie uvedený kód do app.js.
100 km/h na mph
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom'; Poznámka: BrowserRouter má alias ako Router.
Použitie smerovača React: Ak chcete použiť React Router, najprv vytvorte niektoré komponenty v aplikácii React. V adresári projektu vytvorte priečinok s názvom komponenty v priečinku src a teraz pridajte 3 súbory s názvom home.js, about.js a contact.js do priečinka komponentov.
Pridajme nejaký kód do našich 3 komponentov:
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; Teraz zahrňme komponenty React Router do aplikácie:
BrowserRouter : Pridajte alias BrowserRouter ako smerovač do súboru app.js, aby ste zabalili všetky ostatné komponenty. BrowserRouter je nadradený komponent a môže mať iba jedného potomka.
class App extends Component { render() { return ( ); } } odkazy: Poďme teraz vytvoriť prepojenia našich komponentov. Komponent Odkaz používa rekvizity na popis miesta, do ktorého má odkaz smerovať.
<ul> <li> Home </li> <li> About Us </li> <li> Contact Us </li> </ul>
Teraz spustite aplikáciu na lokálnom hostiteľovi a kliknite na vytvorený odkaz. Všimnete si, že adresy URL sa menia podľa hodnoty komponentu odkazu.
Trasa : Komponent trasy nám pomôže vytvoriť prepojenie medzi používateľským rozhraním komponentu a adresou URL. Ak chcete zahrnúť trasu do aplikácie, pridajte nižšie uvedený kód do súboru app.js.
<route exact path="/" element="{}"> <route exact path="/about" element="{}"> <route exact path="/contact" element="{}"> </route></route></route> Komponenty sú teraz pripojené a kliknutím na ľubovoľný odkaz sa zobrazí príslušný komponent. Pokúsme sa teraz pochopiť rekvizity spojené s koreňovým komponentom.
- Element označuje komponent, ktorý sa vykreslí, ak sa cesta zhoduje.
Poznámka: V predvolenom nastavení sú trasy inkluzívne, čo znamená, že viac ako jeden komponent trasy sa môže zhodovať s cestou URL a súčasne sa vykresľovať. Ak chceme vykresliť jeden komponent, musíme tu použiť trasy.
Trasy : Ak chcete čítať jeden komponent, zabaľte všetky trasy do komponentu Routes.
<route exact path="/" element="{}"> <route exact path="/about" element="{}"> <route exact path="/contact" element="{}"> </route></route></route> Prepínajte skupiny naprieč viacerými trasami, iterujte ich a nájdite prvú, ktorá zodpovedá ceste. Takto sa vykreslí zodpovedajúci komponent cesty.
Tu je náš úplný zdrojový kód po pridaní všetkých komponentov:
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> Teraz môžete kliknúť na odkaz a prechádzať rôznymi komponentmi. React Router udržuje používateľské rozhranie vašej aplikácie synchronizované s adresou URL.
Nakoniec sme úspešne implementovali navigáciu v našej aplikácii React pomocou React Router.
A, ktoré používa rozhranie API histórie HTML5 (udalosti pushstate, replacestate a popstate), aby vaše používateľské rozhranie bolo synchronizované s adresou URL.
základné meno: reťazec
Základná adresa URL pre všetky miesta. Ak je vaša aplikácia poskytovaná z podadresára na vašom serveri, budete ju chcieť nastaviť do tohto podadresára. Správne naformátovaný základný názov musí obsahovať úvodnú lomku, ale žiadnu koncovú lomku.
// renders // renders <a href="tmp//calendar/tomorrow"> ... </a>
getUserConfirmation: func
Funkcia na potvrdenie navigácie. Predvolene sa používa window.confirm.
{ // this is the default behavior const allowTransition = window.confirm(message); callback(allowTransition); }} /> forceRefresh: bool
Ak je pravda, smerovač použije celostránkové aktualizácie navigácie na stránke. Možno to budete chcieť použiť na napodobnenie toho, ako by fungovala tradičná aplikácia vykreslená serverom s celostránkovým obnovením medzi navigáciou na stránke.
dĺžka kľúča: číslo
Dĺžka umiestnenia. kľúč. Predvolená hodnota je 6.
deti: uzol- podradený prvok na vykreslenie.
Poznámka: V Reacte musíte použiť jeden podradený prvok, pretože metóda vykresľovania nemôže vrátiť viac ako jeden prvok. Ak potrebujete viac ako jeden prvok, môžete ich skúsiť zabaliť do dodatočného alebo .
A, ktoré používa hashovú časť adresy URL (t. j. window.location.hash), aby sa vaše používateľské rozhranie synchronizovalo s adresou URL.
Poznámka: hash nepodporuje umiestnenie histórie. Kľúč alebo umiestnenie. Štát. V predchádzajúcich verziách sme sa snažili znížiť správanie, ale vyskytli sa okrajové prípady, ktoré sme nedokázali vyriešiť. Žiadny kód alebo doplnok, ktorý vyžaduje toto správanie, nebude fungovať.
Keďže táto technológia je určená na podporu iba starších prehliadačov, odporúčame vám nakonfigurovať váš server, s ktorým bude pracovať.
základné meno: reťazec
Základná adresa URL pre všetky miesta. Správne naformátovaný základný názov by mal mať úvodnú lomku, ale žiadnu koncovú lomku.
// renders <a href="#/calendar/today"> </a>
getUserConfirmation: func
Funkcia na potvrdenie navigácie. Predvolene sa používa window.confirm.
{ // this is the default behavior const allowTransition = window.confirm(message); callback(allowTransition); }} /> hashType: reťazec
Kódovanie použité pre hash.umiestnenia.okna . Dostupné hodnoty sú:
- 'lomítko' - vytvára hash ako #/ a #/sunshine/lízanka
- 'noslash' - # a #sunshine/lízanky . ako hash vytvára
- 'hashbang' – vytvára 'ajax crawlable' (zastarané Googlom) hash ako #!/ a #!/sunshine/lollipops
Predvolená hodnota je „lomka“.
deti: uzol
Jediný podradený prvok na vykreslenie.
Poskytuje deklaratívnu a dostupnú navigáciu vo vašej aplikácii.
About
natiahnuť
Reťazcová reprezentácia umiestnenia odkazu sa vytvorí kombináciou názvu cesty, vyhľadávania a hash vlastností umiestnenia.
Objekt, ktorý môže mať ktorúkoľvek z nasledujúcich vlastností:
komu: func
Funkcia, v ktorej je aktuálna poloha odovzdaná ako argument a ktorá musí vrátiť reprezentáciu polohy ako reťazec alebo objekt.
({ ...location, pathname: '/courses' })} /> `${location.pathname}?sort=name`} /> nahradiť: bool
Ak je hodnota true, kliknutím na odkaz nahradíte aktuálny záznam namiesto pridania nového
entry to the history stack.
interné ref: func
Od React Router 5.1, ak používate React 16, túto podperu by ste nemali potrebovať, pretože referenciu preposielame základnému . Namiesto toho použite normálnu referenciu.
Umožňuje prístup k vstavanému ref.
{ // `node` refers to the mounted DOM element // or null when unmounted }} /> innerRef: RefObject
Od React Router 5.1, ak používate React 16, túto podperu by ste nemali potrebovať, pretože referenciu preposielame základnému . Namiesto toho použite normálnu referenciu.
Získajte základnú referenciu komponentu pomocou React.createRef.
let anchorRef = React.createRef()
komponent: React.Component
Ak by ste chceli použiť svoj vlastný navigačný komponent, môžete tak urobiť tak, že ho prejdete cez podperu komponentu.
const FancyLink = React.forwardRef(({ navigate, ...props }, ref) => { return ( <a ref="{ref}" {...props} onclick="{handleClick}">💅 {props.children} ) }) </a> Môžete tiež odovzdať rekvizity, na ktorých by ste chceli byť ako je názov, id, názov triedy atď.
Jeho špeciálna verzia pridá k vykreslenému prvku atribúty štýlu, ak sa zhoduje s existujúcou adresou URL.
About
className: string | func
className môže byť reťazec alebo funkcia, ktorá vracia reťazec. Ak sa použije funkcia className, aktívny stav odkazu sa odovzdá ako parameter. To je užitočné, ak chcete použiť názov triedy výlučne na neaktívny odkaz.
'nav-link' + (!isActive ? ' unselected' : '') } >
často kladené otázky
V React Router v6 bude activeClassName odstránený a mali by ste použiť funkciu className na aplikovanie classname na aktívne alebo neaktívne komponenty NavLink.
ActiveClassName: Reťazec
trieda, aby ste dali prvku, keď je aktívny. Predvolená daná trieda je aktívna. Bude kombinovaný s rekvizitou s názvom triedy.
štýl: objekt | func
style môže byť buď objekt React.CSSProperties alebo funkcia, ktorá vracia objekt štýlu. Ak sa použije štýl funkcie, aktívny stav prepojenia sa odovzdá ako parameter.
({ color: isActive ? 'green' : 'blue' })} > V React Router v6 sa aktívny štýl odstráni a na aplikovanie vložených štýlov na aktívne alebo neaktívne komponenty NavLink musíte použiť funkčný štýl.
Aktívny štýl: Objekt
Štýly použité na prvok, keď je aktívny.
<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> prísny: bool
Ak je pravda, pri určovaní, či sa umiestnenie zhoduje s aktuálnou adresou URL, sa bude brať do úvahy koncová lomka v názve cesty. Ďalšie podrobnosti nájdete v dokumentácii.
Events
isActive: func
Funkcia na pridanie ďalšej logiky na určenie, či je prepojenie aktívne. Toto by ste mali použiť, ak chcete urobiť viac, než len overiť, či sa názov cesty odkazu zhoduje s názvom cesty aktuálnej adresy URL.
{ 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 miesto: objekt
isActive Porovnáva sa s aktuálnym umiestnením histórie (zvyčajne s aktuálnou adresou URL prehliadača).
ária-prúd: struna
Hodnota atribútu area-current použitá na aktívnom odkaze. Dostupné hodnoty sú:
- 'stránka' - používa sa na označenie odkazu v rámci súboru odkazov na stránkovanie
- „Kroky“ – používa sa na označenie prepojenia v rámci indikátora kroku pre proces založený na krokoch
- „umiestnenie“ – používa sa na označenie obrázka, ktorý je vizuálne zvýraznený ako aktuálny komponent vývojového diagramu
- 'dátum' - používa sa na označenie aktuálneho dátumu v kalendári
- 'time' - používa sa na označenie aktuálneho času v rámci rozvrhu
- 'true' – používa sa na označenie, či je NavLink aktívny
- „false“ – používa sa na zabránenie tomu, aby pomocné technológie reagovali na aktuálny odkaz (jedným prípadom použitia by bolo zabránenie viacerým značkám aktuálnej oblasti na stránke)