React Router to standardowa biblioteka do routingu w React. Umożliwia nawigację pomiędzy widokami z różnych komponentów aplikacji React, pozwala na zmianę adresu URL przeglądarki i utrzymuje synchronizację interfejsu użytkownika z adresem URL.
Aby zrozumieć jak działa React Router, stwórzmy prostą aplikację dla React. Aplikacja będzie zawierać komponenty home, about i contact. Będziemy używać React Router do nawigacji pomiędzy tymi komponentami.
npx utwórz-reaguj-aplikację
Twoje środowisko programistyczne jest gotowe. Zainstalujmy teraz React Router w naszej aplikacji.
Reaguj routerem : React Router można zainstalować w aplikacji React poprzez npm. Wykonaj poniższe kroki, aby skonfigurować Router w aplikacji React:
Krok 1: Płyta CD w katalogu projektu, tj ., jawa.
Krok 2: Użyj następującego polecenia, aby zainstalować React Router:
npm install - -save reagują-router-dom
Po zainstalowaniu React-router-dom dodaj jego komponenty do swojej aplikacji React.
Dodawanie komponentów routera React:
Główne komponenty React Router to:
Zamiast przemierzać trasę po kolei, trasy są wybierane na podstawie najlepszego dopasowania.
Aby dodać komponenty React Router do swojej aplikacji, otwórz katalog projektu w edytorze, którego używasz i przejdź do pliku app.js. Teraz dodaj poniższy kod do app.js.
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom'; Uwaga: BrowserRouter jest nazywany routerem.
Korzystanie z routera React: Aby użyć React Router, najpierw utwórzmy kilka komponentów w aplikacji React. W katalogu projektu utwórz folder o nazwie komponenty w folderze src, a teraz dodaj 3 pliki o nazwach home.js, about.js i contact.js w folderze komponentów.
Dodajmy trochę kodu do naszych 3 komponentów:
Strona główna.js:
import React from 'react'; function Home (){ return } export default Home; Informacje o.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; Kontakt.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 dołączmy komponenty React Router do aplikacji:
PrzeglądarkaRouter : Dodaj alias BrowserRouter jako router do pliku app.js, aby opakować wszystkie pozostałe komponenty. BrowserRouter jest komponentem nadrzędnym i może mieć tylko jedno dziecko.
class App extends Component { render() { return ( ); } } Spinki do mankietów: Stwórzmy teraz połączenia naszych komponentów. Komponent Link używa rekwizytów do opisania lokalizacji, do której łącze powinno prowadzić.
<ul> <li> Home </li> <li> About Us </li> <li> Contact Us </li> </ul>
Teraz uruchom aplikację na hoście lokalnym i kliknij utworzony link. Zauważysz, że adresy URL zmieniają się w zależności od wartości komponentu linku.
Trasa : Komponent trasy pomoże nam ustanowić połączenie między interfejsem użytkownika komponentu a adresem URL. Aby uwzględnić trasę w aplikacji, dodaj poniższy kod do pliku app.js.
<route exact path="/" element="{}"> <route exact path="/about" element="{}"> <route exact path="/contact" element="{}"> </route></route></route> Komponenty są teraz połączone, a kliknięcie dowolnego łącza spowoduje wyrenderowanie odpowiedniego komponentu. Spróbujmy teraz zrozumieć właściwości związane z komponentem głównym.
- Element odnosi się do komponentu, który będzie renderowany, jeśli ścieżka będzie zgodna.
Uwaga: Domyślnie trasy są włączane, co oznacza, że więcej niż jeden komponent trasy może pasować do ścieżki URL i być renderowany jednocześnie. Jeśli chcemy wyrenderować pojedynczy komponent, musimy tutaj użyć tras.
Trasy : Aby odczytać pojedynczy komponent, zawiń wszystkie trasy w komponencie Trasy.
<route exact path="/" element="{}"> <route exact path="/about" element="{}"> <route exact path="/contact" element="{}"> </route></route></route> Przełączaj grupy na wiele tras, iteruj po nich i znajdź pierwszą, która pasuje do ścieżki. W ten sposób renderowany jest odpowiedni komponent ścieżki.
Oto nasz pełny kod źródłowy po dodaniu wszystkich komponentów:
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 możesz kliknąć łącze i poruszać się po różnych komponentach. React Router synchronizuje interfejs aplikacji z adresem URL.
Wreszcie pomyślnie zaimplementowaliśmy nawigację w naszej aplikacji React przy użyciu React Router.
A, który korzysta z interfejsu API historii HTML5 (zdarzenia Pushstate, Replacestate i Popstate), aby zapewnić synchronizację interfejsu użytkownika z adresem URL.
nazwa podstawowa: ciąg
Podstawowy adres URL dla wszystkich lokalizacji. Jeśli Twoja aplikacja jest udostępniana z podkatalogu na Twoim serwerze, będziesz chciał ustawić ją w tym podkatalogu. Prawidłowo sformatowana nazwa bazowa musi zawierać ukośnik wiodący, ale nie musi zawierać ukośnika końcowego.
// renders // renders <a href="tmp//calendar/tomorrow"> ... </a>
getUserConfirmation: func
Funkcja służąca do potwierdzania nawigacji. Domyślnie używane jest window.confirm.
{ // this is the default behavior const allowTransition = window.confirm(message); callback(allowTransition); }} /> siłaOdśwież: bool
Jeśli ma wartość true, router będzie korzystał z nawigacji na stronie z odświeżaniem całej strony. Możesz użyć tego do naśladowania działania tradycyjnej aplikacji renderowanej na serwerze z odświeżaniem całej strony pomiędzy nawigacją po stronie.
Długość klucza: liczba
Długość lokalizacji. Klucz. Domyślnie 6.
dzieci: węzeł- element podrzędny do renderowania.
Uwaga: W React musisz użyć pojedynczego elementu potomnego, ponieważ metoda render nie może zwrócić więcej niż jednego elementu. Jeśli potrzebujesz więcej niż jednego elementu, możesz spróbować owinąć je dodatkowym lub .
A, który używa części adresu URL zawierającej skrót (tj. window.location.hash), aby zapewnić synchronizację interfejsu użytkownika z adresem URL.
Uwaga: skrót nie obsługuje lokalizacji historii. Klucz lub lokalizacja. Państwo. W poprzednich wersjach próbowaliśmy ograniczyć to zachowanie, ale zdarzały się przypadki brzegowe, których nie mogliśmy rozwiązać. Żaden kod lub wtyczka wymagająca takiego zachowania nie będzie działać.
Ponieważ technologia ta jest przeznaczona do obsługi tylko starszych przeglądarek, zachęcamy do skonfigurowania serwera do współpracy.
nazwa podstawowa: ciąg
Podstawowy adres URL wszystkich lokalizacji. Prawidłowo sformatowana nazwa bazowa powinna zawierać ukośnik wiodący, ale nie powinna zawierać ukośnika końcowego.
// renders <a href="#/calendar/today"> </a>
getUserConfirmation: func
Funkcja służąca do potwierdzania nawigacji. Domyślnie używane jest window.confirm.
{ // this is the default behavior const allowTransition = window.confirm(message); callback(allowTransition); }} /> typ hash: ciąg
Kodowanie używane do okno.lokalizacja.hash . Dostępne wartości to:
- „ukośnik” – tworzy skróty takie jak #/ i #/sunshine/lollipops
- „noslash” - # i #sunshine/lollipops . tak jak hash tworzy
- „hashbang” – tworzy skróty „ajax” (przestarzałe przez Google), takie jak #!/ i #!/sunshine/lollipops
Domyślnie jest to „ukośnik”.
dzieci: węzeł
Pojedynczy element podrzędny do renderowania.
Zapewnia deklaratywną, przystępną nawigację po aplikacji.
About
do: ciąg
Ciąg znaków reprezentujący lokalizację łącza jest tworzony przez połączenie nazwy ścieżki, wyszukiwania i właściwości skrótu lokalizacji.
Obiekt, który może mieć dowolną z następujących właściwości:
do: func
Funkcja, w której bieżąca lokalizacja jest przekazywana jako argument i która musi zwracać reprezentację lokalizacji w postaci ciągu znaków lub obiektu.
({ ...location, pathname: '/courses' })} /> `${location.pathname}?sort=name`} /> zamień: bool
Jeśli ma wartość true, kliknięcie łącza spowoduje zastąpienie bieżącego wpisu zamiast dodania nowego
entry to the history stack.
ref. wew.: func
Począwszy od React Router 5.1, jeśli używasz React 16, nie powinieneś potrzebować tego rekwizytu, ponieważ przekazujemy ref do bazowego . Zamiast tego użyj normalnego ref.
css pogrubione
Umożliwia dostęp do wbudowanego ref. komponentu.
{ // `node` refers to the mounted DOM element // or null when unmounted }} /> internalRef: RefObject
Począwszy od React Router 5.1, jeśli używasz React 16, nie powinieneś potrzebować tej właściwości, ponieważ przekazujemy ref do bazowego . Zamiast tego użyj normalnego ref.
Uzyskaj bazowy ref komponentu za pomocą React.createRef.
let anchorRef = React.createRef()
komponent: React.Component
Jeśli chcesz wykorzystać własny komponent nawigacyjny, możesz to zrobić, przekazując go przez podpórkę komponentu.
const FancyLink = React.forwardRef(({ navigate, ...props }, ref) => { return ( <a ref="{ref}" {...props} onclick="{handleClick}">💅 {props.children} ) }) </a> Możesz także przekazać rekwizyty, na których chciałbyś się znaleźć takie jak tytuł, identyfikator, nazwa klasy itp.
Specjalna wersja tego doda atrybuty stylu do renderowanego elementu, jeśli pasuje on do istniejącego adresu URL.
About
nazwa klasy: ciąg | funk
className może być ciągiem znaków lub funkcją zwracającą ciąg. Jeżeli używana jest funkcja className, jako parametr przekazywany jest stan aktywny łącza. Jest to przydatne, jeśli chcesz zastosować nazwę klasy wyłącznie do nieaktywnego łącza.
'nav-link' + (!isActive ? ' unselected' : '') } >
Często zadawane pytania
W React Router v6, activeClassName zostanie usunięte i powinieneś użyć funkcji className, aby zastosować nazwę klasy do aktywnych lub nieaktywnych komponentów NavLink.
NazwaKlasy Aktywnej: Ciąg
class, aby nadać elementowi, gdy jest on aktywny. Domyślnie podana klasa jest aktywna. Zostanie on połączony z właściwością nazwy klasy.
styl: obiekt | funk
style może być obiektem React.CSSProperties lub funkcją zwracającą obiekt stylu. Jeśli używany jest styl funkcji, stan aktywny łącza jest przekazywany jako parametr.
({ color: isActive ? 'green' : 'blue' })} > W React Router v6 aktywna stylizacja zostanie usunięta i będziesz musiał użyć funkcji style, aby zastosować style wbudowane do aktywnych lub nieaktywnych komponentów NavLink.
Aktywny styl: Obiekt
Style zastosowane do elementu, gdy jest on aktywny.
<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> ścisłe: bool
Jeśli ma wartość true, końcowy ukośnik w ścieżce lokalizacji będzie brany pod uwagę przy ustalaniu, czy lokalizacja jest zgodna z bieżącym adresem URL. Więcej szczegółów znajdziesz w dokumentacji.
Events
jest aktywny: func
Funkcja dodająca dodatkową logikę w celu ustalenia, czy łącze jest aktywne. Należy tego używać, gdy chcesz zrobić coś więcej niż tylko sprawdzenie, czy nazwa ścieżki łącza jest zgodna z nazwą ścieżki bieżącego adresu 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 lokalizacja: obiekt
isActive Porównuje bieżącą lokalizację historii (zazwyczaj bieżący adres URL przeglądarki).
aria-prąd: ciąg
Wartość atrybutu prądu obszaru używanego w aktywnym łączu. Dostępne wartości to:
- 'strona' - używana do wskazania łącza w zestawie linków do stronicowania
- „Kroki” – używane do wskazania łącza we wskaźniku kroku dla procesu opartego na krokach
- „lokalizacja” — używana do wskazania obrazu, który jest wizualnie wyróżniony jako bieżący element schematu blokowego
- 'data' - używana do wskazania aktualnej daty w kalendarzu
- 'time' - używany do wskazania aktualnego czasu w rozkładzie jazdy
- „true” – używany do wskazania, czy NavLink jest aktywny
- „false” — używany, aby zapobiec reagowaniu technologii wspomagających na bieżący link (jednym z przypadków użycia byłoby uniemożliwienie wielu tagów obszaru bieżącego na stronie)