Routing w aplikacjach React przy użyciu React Router

Każda nowoczesna aplikacja internetowa wymaga nawigacji pomiędzy różnymi stronami. W przypadku aplikacji React najczęściej stosowanym rozwiązaniem jest React Router, który umożliwia efektywne i łatwe zarządzanie routowaniem. W tym artykule wyjaśnimy, czym jest React Router, jak działa i jak możesz go poprawnie zaimplementować w swojej aplikacji.

Co to jest React Router?

React Router to biblioteka, która umożliwia nawigację w aplikacjach typu single-page (SPA). Dzięki niemu możemy przełączać się pomiędzy różnymi stronami bez konieczności przeładowywania całej strony.

Jaki ma praktyczny sens routowanie w React?

Poprawne routowanie w React pozwala na:

• Tworzenie dynamicznych i wielostronicowych aplikacji.
• Poprawienie doświadczeń użytkownika poprzez unikanie przeładowania strony przy każdej zmianie.
• Łatwe zarządzanie URL-ami i nawigacją w aplikacji.

1. Instalacja React Router

Zanim zaczniemy, należy zainstalować pakiet react-router-dom:

npm install react-router-dom

Jeśli używasz Yarn, możesz go zainstalować za pomocą:

yarn add react-router-dom

2. Podstawowa struktura React Router

Najprostszym sposobem użycia React Router jest zaimplementowanie go w aplikacji w następujący sposób:

import { BrowserRouter, Routes, Route } from "react-router-dom";

function Domow() {
    return <h2>Strona główna</h2>;
}

function O_nas() {
    return <h2>O nas</h2>;
}

function App() {
    return (
        <BrowserRouter>
            <Routes>
                <Route path="/" element={<Domow />} />
                <Route path="/o-nas" element={<O_nas />} />
            </Routes>
        </BrowserRouter>
    );
}

export default App;

Wyjaśnienie:

• BrowserRouter – Otacza aplikację i umożliwia zarządzanie ścieżkami URL.
• Routes – Zawiera poszczególne Route, które definiują ścieżki.
• Route – Określa ścieżkę i komponent, który ma się pojawić.

3. Dodanie nawigacji

React Router dostarcza komponent Link, który umożliwia nawigację pomiędzy stronami bez ich przeładowywania.

import { BrowserRouter, Routes, Route, Link } from "react-router-dom";

function Domow() {
    return <h2>Strona główna</h2>;
}

function O_nas() {
    return <h2>O nas</h2>;
}

function Nawigacja() {
    return (
        <nav>
            <Link to="/">Strona główna</Link> | 
            <Link to="/o-nas">O nas</Link>
        </nav>
    );
}

function App() {
    return (
        <BrowserRouter>
            <Nawigacja />
            <Routes>
                <Route path="/" element={<Domow />} />
                <Route path="/o-nas" element={<O_nas />} />
            </Routes>
        </BrowserRouter>
    );
}

export default App;

Teraz mamy nawigację, która pozwala na przełączanie pomiędzy stronami.

4. Dynamiczne routowanie za pomocą parametrów

Często trzeba przekazywać parametry w URL. Można to osiągnąć przy pomocy hooka useParams.

import { useParams } from "react-router-dom";

function Profil() {
    let { id } = useParams();
    return <h2>Profil użytkownika: {id}</h2>;
}

Dodanie dynamicznej ścieżki:

<Route path="/profil/:id" element={<Profil />} />

Jeśli teraz odwiedzisz /profil/123, pojawi się „Profil użytkownika: 123”.

Najczęściej zadawane pytania

1. Jaka jest różnica między BrowserRouter a HashRouter?

BrowserRouter używa czystych URL-i, podczas gdy HashRouter używa „#” w URL-u dla kompatybilności ze starszymi serwerami.

2. Jak przekierować użytkownika na inną stronę?

Możesz użyć hooka useNavigate:

import { useNavigate } from "react-router-dom";

function Domow() {
    let navigate = useNavigate();
    return <button onClick={() => navigate("/o-nas")}>Przejdź do O nas</button>;
}

3. Jak utworzyć stronę błędu (404)?

Dodaj do Routes domyślną ścieżkę *:

<Route path="*" element={<h2>Strona nie istnieje</h2>} />

Top 5 ciekawych faktów o React Router

1. React Router został po raz pierwszy wydany w 2014 roku i od tego czasu stał się standardem dla nawigacji w aplikacjach React.
2. Wersja 6 React Routera przyniosła znaczną uproszczenie kodu w porównaniu do poprzednich wersji.
3. Umożliwia routowanie po stronie klienta, a także po stronie serwera (np. w Next.js).
4. Wspiera lazy loading, co poprawia wydajność aplikacji.
5. Za pomocą useNavigate można programowo zmieniać URL bez potrzeby przeładowania strony.

Chcesz nauczyć się programować?

Jeśli chcesz wziąć udział w kursach programowania online lub stacjonarnych, sprawdź naszą ofertę na www.like-it.sk. Nasze kursy prowadzą doświadczeni eksperci, którzy pomogą Ci opanować React od podstaw po zaawansowane koncepty.

Marián Knězek