Podstawy React Router: BrowserRouter, trasy, wyjaśnienie Route i Link

Większość aplikacji React szybko wymaga kilku ekranów, takich jak Strona główna, O nas, Produkty i Kontakt. Sam React nie ma pojęcia o URL-ach, więc mapowanie adresów na ekrany jest zadaniem biblioteki, zwykle React Router. Cztery jej komponenty obejmują większość codziennych zadań routingu: <BrowserRouter>, <Routes>, <Route> oraz <Link>. Gdy już poznasz funkcję każdego z nich oraz sposób ich nawzajemnego łączenia, możesz stworzyć aplikację jednostronicową z wieloma stronami i wyjaśnić to podczas rozmowy kwalifikacyjnej.

BrowserRouter łączy React z URL-em

<BrowserRouter> to sam router. Umożliwia routowanie po stronie klienta za pomocą API History przeglądarki, utrzymując renderowaną interfejs użytkownika w synchronizacji z paskiem adresu bez żądania nowego dokumentu od serwera.

Użyj tego, gdy twoja aplikacja powinna udostępniać oddzielne adresy URL dla swoich ekranów, zachowując jednocześnie funkcjonowanie jak jedna strona, na przykład:

/
/about
/products
/contact

Ustawienie polega na otoczeniu drzewa komponentów; wszystko, co wymaga routingu, musi znajdować się w jego obrębie:

import { BrowserRouter } from "react-router-dom";
function App() {
  return (
    <BrowserRouter>
      {/* Application routes */}
    </BrowserRouter>
  );
}

Zazwyczaj umieszcza się je raz, u korzenia. Jedną z praktycznych konsekwencji jest to, że ponieważ adresy takie jak /about są rzeczywistymi URL-ami, serwer musi dostarczać ten sam plik index.html dla wszystkich z nich, w przeciwnym razie odświeżenie strony /about powoduje błąd 404 serwera.

Routes decyduje, co ma być wyświetlone

<Routes> jest kontenerem dla definicji tras. Przy każdej zmianie lokalizacji porównuje aktualny adres URL z jego elementami i wyświetla ten, który pasuje. Użyj tego wtedy, gdy to React Router, a nie ręcznie napisane warunki, powinien decydować, który ekran ma się pojawić:

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/about" element={<About />} />
  <Route path="/products" element={<Products />} />
</Routes>

Tutaj jeden element <Routes> obsługuje wszystkie trzy ścieżki. Wybiera najlepsze dopasowanie zamiast pierwszego wymienionego, więc rzadko musisz się martwić kolejnością.

Szablony tras łączą jedną ścieżkę z jednym elementem

Każdy element <Route> łączy ścieżkę URL z komponentem do wyświetlenia, podobnie jak wpis w tabeli wyszukiwania:

/about → About component
/products → Products component

Dodaj jeden taki element dla każdego URL, który ma wyświetlić coś konkretnego. Kluczowymi atrybutami są path i element:

<Route
  path="/about"
  element={<About />}
/>

Zgodnie z tą definicją, odwiedzenie tej adresu:

/about

powoduje, że React Router wyświetli:

<About />

Uwaga: element przyjmuje już wyrenderowany element (<About />), a nie referencję komponentu, więc możesz bezpośrednio przekazać atrybuty. Kilka tras razem wygląda w ten sposób:

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/about" element={<About />} />
  <Route path="/contact" element={<Contact />} />
</Routes>

Jeśli żaden ścieżka się nie pokrywa, nic w tym bloku nie jest renderowane; standardowym sposobem na wyświetlenie ekranu „nie znaleziono” jest użycie ogólnej ścieżki path="*".

Link umożliwia nawigację bez ponownego ładowania

<Link> przenosi użytkownika między ścieżkami, przy czym aplikacja pozostaje załadowana. Tworzy zwykły element <a> w DOM-ie, ale przerywa kliknięcie i pozwala React Routerowi obsłużyć nawigację. Należy go używać do wewnętrznej nawigacji, np. w pasku menu:

import { Link } from "react-router-dom";
function Navbar() {
  return (
    <nav>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
      <Link to="/contact">Contact</Link>
    </nav>
  );
}

Kliknięcie na About aktualizuje adres URL, <Routes> jest ponownie ewaluowany i pojawia się ekran „O nas”, bez konieczności ponownego ładowania przeglądarki, dzięki czemu wspólna struktura i stan w pamięci są zachowane. W przypadku stron zewnętrznych nadal właściwy jest zwykły element <a>.

Łączenie wszystkich elementów

Minimalne, kompletnie przygotowane rozwiązanie (z sekcjami Home, About i Contact zdefiniowanymi w innych miejscach):

import {
  BrowserRouter,
  Routes,
  Route,
  Link
} from "react-router-dom";
function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
        <Link to="/contact">Contact</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </BrowserRouter>
  );
}

Linki oraz blok <Routes> znajdują się wewnątrz <BrowserRouter> jako elementy współbrzuszne: nawigacja pozostaje widoczna na każdej stronie, natomiast tylko obszar <Routes> zmienia zawartość. Krótka hierarchia:

BrowserRouter
      ↓
    Routes
      ↓
    Route
      ↓
  Component

<Link> znajduje się obok tej łańcucha i służy jako element sterujący, w który klikają użytkownicy, aby zmienić adres URL. Przykłady korzystają z biblioteki react-router-dom; nowsze wersje główne udostępniają również te interfejsy z pakietu react-router, więc sprawdź dokumentację dostosowaną do swojej wersji.

Pytania z rozmowy kwalifikacyjnej

• Czym jest <BrowserRouter>? To router umożliwiający routowanie po stronie klienta i utrzymujący interfejs użytkownika zgodny z adresem URL w przeglądarce.

Jaka jest różnica między <Routes> a <Route>? <Routes> to kontener, który dopasowuje się do URL; każdy <Route> definiuje jedną ścieżkę oraz element do wyświetlenia.

Jaka jest różnica między <Link> a <a>? <Link> umożliwia nawigację po stronie klienta bez pełnego ponownego załadunku; zwykły <a> sprawia, że przeglądarka ponownie ładuje podany URL.

Dlaczego lepiej używać <Link> w aplikacji React Router? Dzięki temu aplikacja pozostaje aplikacją jednostronicową i unika niepotrzebnych pełnych ponownych załadunków strony.

Czy <Route> może funkcjonować bez <BrowserRouter>? Zazwyczaj nie: komponenty routingu muszą być renderowane w kontekście routera, takiego jak <BrowserRouter>.

Główne wnioski

• <BrowserRouter> umożliwia routowanie, raz, na poziomie korzenia.
• <Routes> zarządza trasami i wyświetla odpowiadający element.
• <Route> łączy adres URL z komponentem.
• <Link> przenosi użytkownika między trasami bez ponownego ładowania.

Zagnieżdżone trasy, dynamiczne segmenty, chronione trasy oraz hooki nawigacyjne opierają się wszystkie na tym samym modelu. Aby dowiedzieć się, jak React decyduje, co ponownie wyświetlić po zmianie trasy, zapoznaj się z tworzeniem modelu mentalnego dla procesu synchronizacji, stanu i hooków w React.

Literatura pokrewna

• Budowanie modelu mentalnego dla React: Reconciliation, State i Hooks — Poznaj logikę stojącą za podstawowymi koncepcjami React – reconciliation, komponenty, props, state i hooks – aby rozwijać intuicję zamiast zapamiętywać API.
• React 19.2 wyjaśnione: Activity, useEffectEvent i statyczne renderowanie — Dowiedz się, jak nowy komponent Activity, hook useEffectEvent oraz częściowe statyczne renderowanie w React 19.2 eliminują ukryte koszty wydajności w nowoczesnych interfejsach użytkownika.