React Router és una biblioteca estàndard per a l'encaminament a React. Permet la navegació entre visualitzacions de diferents components en una aplicació React, permet canviar l'URL del navegador i manté la interfície d'usuari sincronitzada amb l'URL.
Per entendre com funciona React Router, creem una aplicació senzilla per a React. L'aplicació inclourà els components de la casa, sobre i de contacte. Utilitzarem React Router per navegar entre aquests components.
npx create-react-app
El vostre entorn de desenvolupament està preparat. Ara instal·lem React Router a la nostra aplicació.
React Router : React Router es pot instal·lar a la vostra aplicació React mitjançant npm. Seguiu els passos següents per configurar l'encaminador a la vostra aplicació React:
Pas 1: CD al directori del vostre projecte, és a dir ., java.
Pas 2: utilitzeu l'ordre següent per instal·lar React Router:
npm install - -save react-router-dom
Després d'instal·lar react-router-dom, afegiu els seus components a la vostra aplicació React.
Afegir components del router React:
Els components principals de React Router són:
En lloc de recórrer en seqüència, les rutes es seleccionen en funció de la millor coincidència.
Per afegir components del React Router a la vostra aplicació, obriu el directori del vostre projecte a l'editor que feu servir i aneu al fitxer app.js. Ara, afegiu el codi següent a app.js.
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom'; Nota: BrowserRouter té un àlies com a router.
Utilitzant React Router: Per utilitzar React Router, primer creem alguns components a l'aplicació React. Al directori del vostre projecte, creeu una carpeta anomenada components dins de la carpeta src i ara afegiu 3 fitxers anomenats home.js, about.js i contact.js a la carpeta components.
Afegim una mica de codi als nostres 3 components:
cadena de llista 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; Ara, incloem els components de React Router a l'aplicació:
BrowserRouter : afegeix un àlies BrowserRouter com a encaminador al fitxer app.js per embolicar tots els altres components. BrowserRouter és un component principal i només pot tenir un fill.
class App extends Component { render() { return ( ); } } Enllaços: Ara creem els enllaços dels nostres components. El component Enllaç utilitza accessoris per descriure la ubicació a la qual ha de navegar l'enllaç.
<ul> <li> Home </li> <li> About Us </li> <li> Contact Us </li> </ul>
Ara, executeu la vostra aplicació a l'amfitrió local i feu clic a l'enllaç creat. Notareu que els URL canvien segons el valor del component d'enllaç.
java per tipus de bucle
Ruta : el component de ruta ens ajudarà a establir l'enllaç entre la interfície d'usuari del component i l'URL. Per incloure la ruta a l'aplicació, afegiu el codi següent al vostre app.js.
<route exact path="/" element="{}"> <route exact path="/about" element="{}"> <route exact path="/contact" element="{}"> </route></route></route> Els components ara estan connectats i, fent clic a qualsevol enllaç, es representarà el component corresponent. Intentem ara entendre els accessoris associats amb el component arrel.
- L'element fa referència al component que es representarà si el camí coincideix.
Nota: De manera predeterminada, les rutes són inclusives, la qual cosa significa que més d'un component de ruta pot coincidir amb un camí d'URL i renderitzar-se simultàniament. Si volem representar un únic component, hem d'utilitzar rutes aquí.
Rutes : Per llegir un únic component, embolcalleu totes les rutes dins del component Rutes.
<route exact path="/" element="{}"> <route exact path="/about" element="{}"> <route exact path="/contact" element="{}"> </route></route></route> Canvia els grups a través de diverses rutes, itera'ls i troba el primer que coincideixi amb el camí. Així, es representa el component corresponent del camí.
Aquí teniu el nostre codi font complet després d'afegir tots els components:
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> Ara, podeu fer clic a l'enllaç i navegar pels diferents components. React Router manté la interfície d'usuari de l'aplicació sincronitzada amb l'URL.
Finalment, hem implementat correctament la navegació a la nostra aplicació React mitjançant React Router.
A que utilitza l'API de l'historial HTML5 (esdeveniments pushstate, replacestate i popstate) per mantenir la vostra interfície d'usuari sincronitzada amb l'URL.
nom base: cadena
URL base per a totes les ubicacions. Si la vostra aplicació es publica des d'un subdirectori del vostre servidor, voldreu configurar-la en aquest subdirectori. Un nom base amb el format adequat ha de contenir una barra inclinada inicial, però cap barra inclinada final.
// renders // renders <a href="tmp//calendar/tomorrow"> ... </a>
getUserConfirmation: func
Una funció que s'utilitza per confirmar la navegació. Per defecte, s'utilitza window.confirm.
{ // this is the default behavior const allowTransition = window.confirm(message); callback(allowTransition); }} /> forceRefresh: bool
Si és cert, l'encaminador utilitzarà la navegació a la pàgina d'actualitzacions de pàgina completa. És possible que vulgueu utilitzar-ho per imitar com funcionaria una aplicació tradicional de servidor amb actualitzacions de pàgina completa entre la navegació de la pàgina.
KeyLength: nombre
La longitud de la ubicació. clau. Per defecte, 6.
fills: node- element fill per representar.
Nota: a React, heu d'utilitzar un sol element fill perquè el mètode de renderització no pot retornar més d'un element. Si necessiteu més d'un element, podeu provar d'embolicar-los amb un element addicional o .
A que utilitza la part hash de l'URL (és a dir, window.location.hash) per mantenir la vostra interfície d'usuari sincronitzada amb l'URL.
bash altrament si
Nota: el hash no admet la ubicació de l'historial. Clau o ubicació. Estat. En versions anteriors, vam intentar reduir el comportament, però hi havia casos extrems que no vam poder resoldre. Qualsevol codi o connector que requereixi aquest comportament no funcionarà.
Com que aquesta tecnologia només és compatible amb navegadors antics, us recomanem que configureu el vostre servidor perquè funcioni.
nom base: cadena
L'URL base de totes les ubicacions. Un nom base amb el format adequat hauria de tenir una barra inclinada inicial, però cap barra inclinada final.
// renders <a href="#/calendar/today"> </a>
getUserConfirmation: func
Una funció que s'utilitza per confirmar la navegació. Per defecte, s'utilitza window.confirm.
{ // this is the default behavior const allowTransition = window.confirm(message); callback(allowTransition); }} /> hashType: cadena
La codificació utilitzada per window.location.hash . Els valors disponibles són:
- 'slash' - crea hash com #/ i #/sunshine/lollipops
- 'noslash' - # i #sunshine/lollipops . com el hash crea
- 'hashbang': crea hash 'ajax rastrejable' (obsolet per Google) com #!/ i #!/sunshine/lollipops
El valor predeterminat és 'barra obliquia'.
fills: node
Un sol element fill per representar.
Proporciona una navegació declarativa i accessible per la vostra aplicació.
About
a: corda
Es crea una representació de cadena d'una ubicació d'enllaç combinant el nom del camí, la cerca i les propietats hash de la ubicació.
Un objecte que pot tenir qualsevol de les propietats següents:
a: func
Una funció en què la ubicació actual es passa com a argument i que ha de retornar la representació de la ubicació com a cadena o objecte.
({ ...location, pathname: '/courses' })} /> `${location.pathname}?sort=name`} /> substituir: bool
Quan és cert, fer clic a l'enllaç substituirà l'entrada actual en lloc d'afegir-ne una de nova
entry to the history stack.
ref interna: func
A partir de React Router 5.1, si utilitzeu React 16, no hauríeu de necessitar aquest suport ja que reenviem la referència al subjacent. . Utilitzeu una referència normal.
Permet l'accés a la ref. integrada del component.
bucle infinit
{ // `node` refers to the mounted DOM element // or null when unmounted }} /> innerRef: RefObject
A partir de React Router 5.1, si utilitzeu React 16, no hauríeu de necessitar aquest suport perquè reenviem la referència al subjacent. . Utilitzeu una referència normal.
Obteniu la referència subjacent del component mitjançant React.createRef.
let anchorRef = React.createRef()
component: Reaccionar.Component
Si voleu utilitzar el vostre propi component de navegació, podeu fer-ho passant-lo per l'accessori del component.
const FancyLink = React.forwardRef(({ navigate, ...props }, ref) => { return ( <a ref="{ref}" {...props} onclick="{handleClick}">💅 {props.children} ) }) </a> També podeu passar els accessoris als quals us agradaria estar com ara un títol, identificador, className, etc.
Una versió especial d'això afegirà atributs d'estil a l'element representat si coincideix amb un URL existent.
About
className: cadena | func
className pot ser una cadena o una funció que retorna una cadena. Si s'utilitza la funció className, l'estat actiu de l'enllaç es passa com a paràmetre. Això és útil si voleu aplicar exclusivament un className a un enllaç inactiu.
'nav-link' + (!isActive ? ' unselected' : '') } >
Preguntes freqüents
A React Router v6, activeClassName s'eliminarà i hauríeu d'utilitzar la funció className per aplicar el nom de classe als components NavLink actius o inactius.
ActiveClassName: cadena
classe per donar l'element quan està actiu. La classe donada per defecte és activa. Es combinarà amb el nom de classe prop.
estil: objecte | func
style pot ser un objecte React.CSProperties o una funció que retorna un objecte d'estil. Si s'utilitza l'estil de funció, l'estat actiu de l'enllaç es passa com a paràmetre.
java afegint a una matriu
({ color: isActive ? 'green' : 'blue' })} > A React Router v6, l'estil actiu s'eliminarà i heu d'utilitzar l'estil de funció per aplicar estils en línia als components NavLink actius o inactius.
Estil actiu: Objecte
Els estils aplicats a l'element quan està actiu.
<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> estricte: bool
Si és cert, la barra inclinada al final del nom del camí d'una ubicació es tindrà en compte a l'hora de determinar si la ubicació coincideix amb l'URL actual. Consulteu la documentació per a més detalls.
Events
isActive: func
Una funció per afegir lògica addicional per determinar si l'enllaç està actiu. Això s'ha d'utilitzar quan vulgueu fer més que verificar que el nom del camí de l'enllaç coincideix amb el nom del camí de l'URL actual.
{ 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 localització: objecte
isActive Compara amb la ubicació de l'historial actual (normalment l'URL del navegador actual).
aria-current: corda
El valor de l'atribut area-current utilitzat a l'enllaç actiu. Els valors disponibles són:
- 'pàgina': s'utilitza per indicar un enllaç dins d'un conjunt d'enllaços de paginació
- 'Pasos': s'utilitza per indicar un enllaç dins de l'indicador de pas per a un procés basat en passos
- 'ubicació': s'utilitza per indicar una imatge que es destaca visualment com a component actual del diagrama de flux
- 'data': s'utilitza per indicar la data actual dins del calendari
- 'hora': s'utilitza per indicar l'hora actual dins d'un horari
- 'true': s'utilitza per indicar si NavLink està actiu
- 'fals': s'utilitza per evitar que les tecnologies d'assistència reaccionin a l'enllaç actual (un cas d'ús seria evitar diverses etiquetes d'àrea actual en una pàgina)