Aplikacja jednostronicowa (SPA) to witryna internetowa lub aplikacja internetowa, która dynamicznie przepisuje istniejącą stronę internetową za pomocą nowych informacji z serwera WWW.

W aplikacji React komponenty pobierają zawartość witryny i renderują ją do pojedynczego pliku HTML w twoim projekcie.

React Router pomaga przejść do wybranego komponentu i renderuje go w pliku HTML. Aby z niego korzystać, musisz wiedzieć, jak skonfigurować i zintegrować React Router z aplikacją React.

Jak zainstalować router React

Aby zainstalować React Router w swoim projekcie React, używając npm, menedżer pakietów JavaScript, uruchom następujące polecenie w katalogu projektu:

npm i reaguję-router-dom

Alternatywnie możesz pobrać pakiet za pomocą Yarn, menedżera pakietów, który umożliwia instalowanie pakietów bibliotek w trybie offline.

Aby zainstalować React Router za pomocą Yarn, uruchom to polecenie:

przędza dodaj adres-router-dom@6

Konfigurowanie routera reagowania

Aby skonfigurować React Router i udostępnić go w swojej aplikacji, zaimportuj PrzeglądarkaRouter z reaguj-router-dom wewnątrz twojego indeks.js plik, a następnie umieść komponent aplikacji w pliku PrzeglądarkaRouter element:

import Reagować z'reagować';
import ReactDOM z„reaguj/klient”; 
import Aplikacja z„./Aplikacja”;
import { Router przeglądarki } z„React-router-dom”;
konst root = ReactDOM.createRoot( dokument.getElementById('źródło') );
root.render(


 </BrowserRouter>
);

Zawijanie komponentu aplikacji w PrzeglądarkaRouter element daje całej aplikacji pełny dostęp do możliwości routera.

Routing do innych komponentów

Po skonfigurowaniu routera w aplikacji należy przystąpić do tworzenia komponentów aplikacji, kierowania ich i renderowania. Poniższy kod importuje i tworzy komponenty o nazwach „Home”, „Informacje” i „Blog”. Importuje również tzw Trasa I Trasy elementy z reaguj-router-dom.

Zdefiniujesz swoje Trasy w pliku Aplikacja część:

import { Trasy, Trasa } z„React-router-dom”;
import Dom z'./Dom';
import O z'./O';
import Blog z„./Blog”;
funkcjonowaćAplikacja() {
powrót (

'/' element={ } />
'/o' element={ } />
'/blog' element={ }/>
 </Routes>
 )
}
eksportdomyślny Aplikacja;

The Aplikacja komponent jest głównym komponentem, który renderuje cały kod, który napisałeś w innych komponentach.

The Trasy element to element nadrzędny, który opakowuje poszczególne trasy utworzone w komponencie aplikacji. The Trasa element tworzy pojedynczą trasę. Wymaga dwóch atrybutów prop: a ścieżka i an element.

The ścieżka atrybut definiuje ścieżkę URL zamierzonego komponentu. Pierwsza trasa w powyższym bloku kodu używa ukośnika odwrotnego (/) jako ścieżki. Jest to specjalna trasa, którą React wyrenderuje jako pierwszą, więc Dom komponent renderuje się podczas uruchamiania aplikacji. Nie mylić z tym systemem zaimplementowanie renderowania warunkowego w komponentach React. Możesz to dać ścieżka przypisz dowolne imię.

The element atrybut definiuje komponent, który Trasa wyrenderuje.

The połączyć komponent jest komponentem React Router używanym do poruszania się po różnych trasach. Te komponenty uzyskują dostęp do różnych tras, które utworzyłeś.

Na przykład:

import { Link } z„React-router-dom”;
funkcjonowaćDom() {
powrót (



'/o'>O stronie</Link>
'/blog'>strona bloga</Link>
To jest strona główna
 </div>
 )
}
eksportdomyślny Dom;

The połączyć jest prawie identyczny z tagiem zakotwiczenia HTML, po prostu używa atrybutu o nazwie „to” zamiast „href”. The połączyć komponent nawiguje do Trasy z odpowiednią nazwą ścieżki jako atrybutem i renderuje komponent Trasy.

Routing zagnieżdżony i sposób jego implementacji

Router React obsługuje routing zagnieżdżony, umożliwiając łączenie wielu tras w jedną. Jest to używane głównie wtedy, gdy istnieje pewne podobieństwo w ścieżkach URL Tras.

Po utworzeniu komponentów, które chcesz poprowadzić, opracujesz indywidualne Trasy dla każdego z nich w aplikacja część.

Na przykład:

import { Trasy, Trasa } z„React-router-dom”; 
import Artykuły z„./Artykuły”;
import Nowy artykuł z'./Nowy artykuł';
import Artykuł pierwszy z„./Artykuł pierwszy”;
funkcjonowaćAplikacja() {
powrót (

'/artykuł' element={ }/>
'/artykuł/nowy' element={ }/>
'/artykuł 1' element={ }/>
 </Routes>
 )
}
eksportdomyślny Aplikacja;

Powyższy blok kodu importuje i kieruje utworzone komponenty Artykuły, Nowy artykuł, I Artykuł pierwszy. Istnieją pewne podobieństwa w ścieżkach adresów URL między trzema trasami.

The Nowy artykuł Ścieżka trasy zaczyna się tak samo jak nazwa ścieżki Artykuły Ścieżka trasy z dodanym ukośnikiem odwrotnym (/) i słowem "new", czyli (/new). Jedyna różnica między nazwami ścieżek pliku Artykuły Trasa i Artykuł pierwszy Trasa to ukośnik (/1) na końcu Artykuł pierwszy nazwa ścieżki komponentu.

Możesz zagnieździć trzy Trasy zamiast pozostawiać je w obecnym stanie.

jak tak:

import { Trasy, Trasa } z„React-router-dom”;
import Artykuły z„./Artykuły”;
import Nowy artykuł z'./Nowy artykuł';
import Artykuł pierwszy z„./Artykuł pierwszy”;
funkcjonowaćAplikacja() {
powrót (

'/artykuł'>
 }/>
'/artykuł/nowy' element={ }/>
'/artykuł 1' element={ }/>
 </Route>
 </Routes>
 )
}
eksportdomyślny Aplikacja;

Zapakowałeś trzy indywidualne Trasy w jedną Trasa element. Zauważ, że rodzic Trasa element ma tylko ścieżka atrybut i nr element atrybut, który definiuje komponent do renderowania. The indeks atrybut w pierwszym dziecku Trasa element określa, że ​​this Trasa renderuje się, gdy przechodzisz do ścieżki adresu URL elementu nadrzędnego Trasa.

Aby twój kod był lepszy i łatwiejszy w utrzymaniu, powinieneś zdefiniować swoje trasy w komponencie i zaimportować je do aplikacja składnik do użytku.

Na przykład:

import { Trasy, Trasa } z„React-router-dom”;
import Artykuły z„./Artykuły”;
import Nowy artykuł z'./Nowy artykuł';
import Artykuł pierwszy z„./Artykuł pierwszy”;
funkcjonowaćArtykułTrasy() {
powrót (

 }/>
'/artykuł/nowy' element={ }/>
'/artykuł 1' element={ }/>
 </Routes>
 )
}
eksportdomyślny artykułTrasy;

Komponent w powyższym bloku kodu zawiera zagnieżdżone trasy, które wcześniej znajdowały się w komponencie aplikacji. Po utworzeniu komponentu należy go zaimportować do pliku aplikacja komponent i pokieruj go za pomocą jednego Trasa element.

Na przykład:

import { Trasy, Trasa } z„React-router-dom”;
import ArtykułTrasy z„./ArticleRoutes”;
funkcjonowaćAplikacja() {
powrót (

'/artykuł/*' element={ }>
 </Routes>
 )
}
eksportdomyślny Aplikacja;

W finale Trasa komponent, dodane symbole odwrotnego ukośnika i gwiazdki na końcu nazwy ścieżki Trasy zapewniają, że nazwa ścieżki odpowiada dowolnej ścieżce rozpoczynającej się od (/artykuł).

React Router to więcej

Powinieneś być już zaznajomiony z podstawami tworzenia aplikacji jednostronicowych w React.js przy użyciu React Router.

W bibliotece React Router dostępnych jest o wiele więcej funkcji, które sprawiają, że programista jest bardziej dynamiczny podczas tworzenia aplikacji internetowych.