React Router je standardní knihovna pro směrování v Reactu. Umožňuje navigaci mezi pohledy z různých komponent v aplikaci React, umožňuje změnu adresy URL prohlížeče a udržuje uživatelské rozhraní synchronizované s adresou URL.
Abychom pochopili, jak React Router funguje, vytvoříme pro React jednoduchou aplikaci. Aplikace bude obsahovat komponenty home, about a contact. K navigaci mezi těmito komponentami budeme používat React Router.
npx create-react-app
Vaše vývojové prostředí je připraveno. Pojďme nyní nainstalovat React Router do naší aplikace.
Reagovat Router : React Router lze nainstalovat do vaší aplikace React prostřednictvím npm. Chcete-li nastavit směrovač v aplikaci React, postupujte podle následujících kroků:
Krok 1: CD v adresáři vašeho projektu, tj ., java.
Krok 2: Pomocí následujícího příkazu nainstalujte React Router:
npm install - -save reagovat-router-dom
Po instalaci React-router-dom přidejte jeho součásti do vaší aplikace React.
Přidání komponent React Router:
Hlavní součásti React Router jsou:
Místo postupného procházení se trasy vybírají na základě nejlepší shody.
Chcete-li do aplikace přidat komponenty React Router, otevřete adresář projektu v editoru, který používáte, a přejděte do souboru app.js. Nyní přidejte níže uvedený kód do app.js.
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom'; Poznámka: BrowserRouter má alias jako Router.
Použití React Router: Chcete-li použít React Router, nejprve vytvořte některé komponenty v aplikaci React. V adresáři projektu vytvořte složku s názvem komponenty ve složce src a nyní do složky komponent přidejte 3 soubory s názvem home.js, about.js a contact.js.
Pojďme přidat nějaký kód do našich 3 komponent:
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; Nyní do aplikace zahrneme komponenty React Router:
java objekt do json
BrowserRouter : Přidejte alias BrowserRouter jako směrovač do souboru app.js, abyste zabalili všechny ostatní komponenty. BrowserRouter je nadřazená komponenta a může mít pouze jednoho potomka.
class App extends Component { render() { return ( ); } } Odkazy: Pojďme nyní vytvořit vazby našich komponent. Komponenta Link používá rekvizity k popisu umístění, do kterého má odkaz navigovat.
<ul> <li> Home </li> <li> About Us </li> <li> Contact Us </li> </ul>
Nyní spusťte aplikaci na místním hostiteli a klikněte na vytvořený odkaz. Všimnete si, že adresy URL se mění podle hodnoty komponenty odkazu.
Trasa : Komponenta trasy nám pomůže vytvořit spojení mezi uživatelským rozhraním komponenty a adresou URL. Chcete-li do aplikace zahrnout trasu, přidejte níže uvedený kód do souboru app.js.
<route exact path="/" element="{}"> <route exact path="/about" element="{}"> <route exact path="/contact" element="{}"> </route></route></route> Komponenty jsou nyní připojeny a kliknutím na libovolný odkaz se vykreslí odpovídající komponenta. Pokusme se nyní porozumět rekvizitám spojeným s kořenovou komponentou.
- Element odkazuje na komponentu, která se vykreslí, pokud se cesta shoduje.
Poznámka: Ve výchozím nastavení jsou trasy inkluzivní, což znamená, že více než jedna komponenta trasy může odpovídat cestě URL a současně se vykreslovat. Pokud chceme vykreslit jednu komponentu, musíme zde použít trasy.
Trasy : Chcete-li číst jednu komponentu, zabalte všechny trasy do komponenty Routes.
<route exact path="/" element="{}"> <route exact path="/about" element="{}"> <route exact path="/contact" element="{}"> </route></route></route> Přepínejte skupiny přes více tras, iterujte je a najděte první, která odpovídá cestě. Tím je vykreslen odpovídající komponent cesty.
Zde je náš úplný zdrojový kód po přidání všech komponent:
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> Nyní můžete kliknout na odkaz a procházet různé součásti. React Router udržuje uživatelské rozhraní vaší aplikace synchronizované s adresou URL.
Nakonec jsme úspěšně implementovali navigaci v naší aplikaci React pomocí React Router.
A, které používá rozhraní API historie HTML5 (události pushstate, replacestate a popstate), aby bylo vaše uživatelské rozhraní synchronizováno s adresou URL.
základní jméno: řetězec
Základní URL pro všechna umístění. Pokud je vaše aplikace poskytována z podadresáře na vašem serveru, budete ji chtít nastavit do tohoto podadresáře. Správně naformátovaný základní název musí obsahovat úvodní lomítko, ale žádné koncové lomítko.
// renders // renders <a href="tmp//calendar/tomorrow"> ... </a>
getUserConfirmation: func
Funkce pro potvrzení navigace. Výchozí nastavení je použití window.confirm.
{ // this is the default behavior const allowTransition = window.confirm(message); callback(allowTransition); }} /> forceRefresh: bool
Je-li nastavena na hodnotu true, bude směrovač používat celostránkové aktualizace pro navigaci na stránce. Můžete to použít k napodobení toho, jak by fungovala tradiční aplikace vykreslená na serveru s celostránkovými aktualizacemi mezi navigací na stránce.
keyLength: číslo
Délka umístění. Klíč. Výchozí hodnota je 6.
přečtěte si soubor csv v jazyce Java
děti: uzel- podřízený prvek k vykreslení.
Poznámka: V Reactu musíte použít jeden podřízený prvek, protože metoda vykreslení nemůže vrátit více než jeden prvek. Pokud potřebujete více než jeden prvek, můžete je zkusit zabalit do dalšího nebo .
A, které používá hash část adresy URL (tj. window.location.hash), aby vaše uživatelské rozhraní bylo synchronizované s adresou URL.
Poznámka: hash nepodporuje umístění historie. Klíč nebo umístění. Stát. V předchozích verzích jsme se snažili toto chování omezit, ale vyskytly se okrajové případy, které jsme nedokázali vyřešit. Žádný kód nebo plugin, který toto chování vyžaduje, nebude fungovat.
Vzhledem k tomu, že tato technologie je určena k podpoře pouze starších prohlížečů, doporučujeme vám nakonfigurovat váš server, se kterým bude pracovat.
základní jméno: řetězec
Základní adresa URL pro všechna umístění. Správně naformátovaný základní název by měl mít úvodní lomítko, ale žádné koncové lomítko.
// renders <a href="#/calendar/today"> </a>
getUserConfirmation: func
Funkce pro potvrzení navigace. Výchozí nastavení je použití window.confirm.
{ // this is the default behavior const allowTransition = window.confirm(message); callback(allowTransition); }} /> hashType: řetězec
Kódování použité pro hash.umístění.okna . Dostupné hodnoty jsou:
jsp
- 'lomítko' - vytváří hash jako #/ a #/sunshine/lízátka
- 'noslash' - # a #sunshine/lízátka . jak hash vytváří
- 'hashbang' - vytváří hash 'ajax crawlable' (zastaralé Googlem) jako #!/ a #!/sunshine/lollipops
Výchozí hodnota je 'lomítko'.
děti: uzel
Jediný podřízený prvek k vykreslení.
Poskytuje deklarativní a přístupnou navigaci kolem vaší aplikace.
About
na: řetězec
Řetězcová reprezentace umístění odkazu je vytvořena kombinací názvu cesty umístění, vyhledávání a vlastností hash.
Objekt, který může mít kteroukoli z následujících vlastností:
do: func
Funkce, ve které je aktuální umístění předáno jako argument a která musí vrátit reprezentaci umístění jako řetězec nebo objekt.
({ ...location, pathname: '/courses' })} /> `${location.pathname}?sort=name`} /> nahradit: bool
Když je true, kliknutím na odkaz nahradíte aktuální položku místo přidání nové
entry to the history stack.
interní ref: func
Od React Router 5.1, pokud používáte React 16, byste neměli potřebovat tuto podpěru, protože přeposíláme ref na podkladové . Místo toho použijte normální ref.
Umožňuje přístup k vestavěnému ref. komponentu.
{ // `node` refers to the mounted DOM element // or null when unmounted }} /> innerRef: RefObject
Od React Router 5.1, pokud používáte React 16, byste tuto podpěru neměli potřebovat, protože přeposíláme ref na podkladové . Místo toho použijte normální ref.
Získejte základní ref komponenty pomocí React.createRef.
let anchorRef = React.createRef()
složka: React.Component
Pokud byste chtěli použít vlastní navigační komponentu, můžete tak učinit tak, že ji projdete skrz podpěru komponenty.
const FancyLink = React.forwardRef(({ navigate, ...props }, ref) => { return ( <a ref="{ref}" {...props} onclick="{handleClick}">💅 {props.children} ) }) </a> Můžete také předat rekvizity, na kterých byste chtěli být jako je název, ID, název třídy atd.
Jeho speciální verze přidá k vykreslenému prvku atributy stylu, pokud se shoduje s existující adresou URL.
About
className: string | func
className může být buď řetězec, nebo funkce, která vrací řetězec. Pokud je použita funkce className, je aktivní stav odkazu předán jako parametr. To je užitečné, pokud chcete výhradně použít className na neaktivní odkaz.
nekonečná smyčka
'nav-link' + (!isActive ? ' unselected' : '') } >
Nejčastější dotazy
V React Router v6 bude activeClassName odstraněn a měli byste použít funkci className k použití classname na aktivní nebo neaktivní komponenty NavLink.
ActiveClassName: Řetězec
třída, která prvku přidělí, když je aktivní. Výchozí daná třída je aktivní. Bude zkombinován s prop pro název třídy.
styl: objekt | func
style může být buď objekt React.CSSProperties, nebo funkce, která vrací objekt stylu. Pokud je použit styl funkce, je aktivní stav odkazu předán jako parametr.
({ color: isActive ? 'green' : 'blue' })} > V React Router v6 bude aktivní styl odstraněn a vy musíte použít styl funkce k aplikování inline stylů na aktivní nebo neaktivní komponenty NavLink.
Aktivní styl: Objekt
Styly použité na prvek, když je aktivní.
<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> přísný: bool
Pokud má hodnotu true, bude při určování, zda umístění odpovídá aktuální adrese URL, zohledněno koncové lomítko u názvu cesty. Další podrobnosti naleznete v dokumentaci.
Events
isActive: func
Funkce pro přidání další logiky k určení, zda je propojení aktivní. Toto by se mělo použít, když chcete udělat víc, než jen ověřit, že název cesty odkazu odpovídá názvu cesty aktuální 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 místo: objekt
isActive Porovnává s aktuálním umístěním historie (obvykle s aktuální adresou URL prohlížeče).
árie-proud: struna
Hodnota atributu area-current použitého na aktivním odkazu. Dostupné hodnoty jsou:
- 'stránka' – používá se k označení odkazu v sadě stránkovacích odkazů
- 'Kroky' - používá se k označení odkazu v indikátoru kroku pro proces založený na krocích
- 'location' – používá se k označení obrázku, který je vizuálně zvýrazněn jako aktuální součást vývojového diagramu
- 'date' - používá se k označení aktuálního data v kalendáři
- 'time' - používá se k označení aktuálního času v rozvrhu
- 'true' – používá se k označení, zda je NavLink aktivní
- 'false' – používá se k zabránění tomu, aby pomocné technologie reagovaly na aktuální odkaz (jedním případem použití by bylo zabránit více oblastem aktuálním tagům na stránce)