Jak korzystać z React Router V6: przewodnik dla początkujących

React Router to najpopularniejsza biblioteka służąca do implementacji routingu w aplikacjach React. Zapewnia ona oparte na komponentach podejście do obsługi różnych zadań routingu, w tym nawigacji po stronie, parametrów zapytań i wielu innych.

React Router w wersji 6 wprowadza znaczące modyfikacje do algorytmu routingu w celu naprawienia niedociągnięć występujących w poprzednich iteracjach oprogramowania i dostarczenia bardziej zaawansowanego i wydajnego systemu zarządzania trasami.

Rozpoczęcie pracy z routingiem przy użyciu React Router V6

Aby rozpocząć proces, możesz utworzyć aplikację React lub skonfigurować projekt React wykorzystujący Vite jako serwer programistyczny. Po utworzeniu projektu należy przystąpić do wprowadzenia biblioteki react-router-dom do zależności projektu.

 npm install react-router-dom 

Tworzenie tras za pomocą React Router

Zamknięcie całej aplikacji w komponencie BrowserRouter jest skutecznym sposobem tworzenia tras. Aby to osiągnąć, należy zaktualizować odpowiednie pliki JavaScript, takie jak index.jsx lub main.jsx . Wprowadzając sugerowane modyfikacje, z powodzeniem stworzysz podstawy routingu w swojej aplikacji.

 import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import { BrowserRouter as Router } from 'react-router-dom';

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <Router>
      <App />
    </Router>
  </React.StrictMode>,
)

Wykorzystanie wrappera BrowserRouter wokół komponentu Application zapewnia pełny dostęp do funkcjonalności i możliwości routingu dostarczanych przez bibliotekę React Router, obejmując całą aplikację.

Korzystanie z komponentu Routes

Po objęciu aplikacji komponentem BrowserRouter możliwe jest określenie konfiguracji routingu.

Komponent Routes stanowi znaczący postęp w stosunku do swojego poprzednika, komponentu Switch, pod względem funkcjonalności w ramach React Routera. Komponent ten oferuje wsparcie dla względnego routingu, umożliwiając płynne przejścia między różnymi częściami aplikacji; posiada również automatyczny ranking tras, zapewniając, że użytkownicy są kierowani do najbardziej odpowiednich treści w oparciu o ich historię nawigacji; dodatkowo może obsługiwać zagnieżdżone trasy, umożliwiając programistom łatwe tworzenie złożonych hierarchii stron.

Ogólnie rzecz biorąc, trasy są zazwyczaj definiowane w komponencie najwyższego poziomu aplikacji, takim jak komponent App. Niemniej jednak ich umiejscowienie może się różnić w zależności od konkretnej struktury organizacyjnej projektu.

Otwórz plik “App.jsx” znajdujący się w katalogu projektu i zastąp znajdujący się w nim domyślny kod React poniższym szablonem:

 import './App.css'
import { Routes, Route } from 'react-router-dom';
import Dashboard from './pages/Dashboard';
import About from './pages/About';

function App() {
  return (
    <>
      <Routes>
        <Route path="/" element={<Dashboard />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </>
  )
}

export default App 

Powyższa konfiguracja routingu kieruje wyznaczone ścieżki URL do odpowiednich elementów strony, a mianowicie Dashboard i About, gwarantując w ten sposób, że aplikacja wyświetli właściwy element po uzyskaniu dostępu za pośrednictwem określonego adresu URL.

Rozważmy funkcjonalność właściwości “element” znajdującej się w komponencie Route, która umożliwia przekazanie funkcjonalnego komponentu, a nie tylko identyfikację jego oznaczenia. Taki układ pozwala na przekazywanie właściwości za pośrednictwem trasowanych ścieżek i odpowiadających im elementów.

W folderze źródłowym utwórz nową sekcję katalogów o nazwie “pages”, a następnie dołącz dwa nowe pliki zatytułowane “Dashboard.jsx” i “About.jsx”. Wykorzystaj te pliki do eksperymentowania z różnymi trasami.

Używanie createBrowserRouter do definiowania tras

Dokumentacja React Routera zaleca używanie komponentu createBrowserRouter do definiowania konfiguracji routingu dla aplikacji internetowych React. Komponent ten jest lekką alternatywą dla BrowserRouter, który jako argument przyjmuje tablicę tras.

Włączenie tego elementu eliminuje wymóg definiowania tras w komponencie App. Możliwe jest ustalenie wszystkich konfiguracji tras w pliku index.jsx lub main.jsx.

Oczywiście, oto wyrafinowana wersja tego stwierdzenia:scssNa przykład rozważmy scenariusz, w którym stosuje się ten element:

 import React from 'react'
import ReactDOM from 'react-dom/client'
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import App from './App.jsx'
import Dashboard from './pages/Dashboard';
import About from './pages/About';


const router = createBrowserRouter([
  {
    path: "/",
    element: <App />,
  },
  {
    path: "/dashboard",
    element: <Dashboard />,
  },
  {
    path: "/about",
    element: <About />,
  },
]);

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
); 

Wykorzystanie komponentów createBrowserRouter i RouterProvider ułatwia ustanowienie infrastruktury routingu w aplikacji opartej na React, wykorzystując ich możliwości do skutecznego kierowania nawigacją użytkownika po różnych połączonych stronach lub funkcjach programu.

W tej konkretnej implementacji istnieje różnica w stosunku do konwencjonalnego podejścia, w którym komponent BrowserRouter hermetyzuje całą aplikację. Zamiast tego, komponent RouterProvider jest wykorzystywany do przekazywania kontekstu Routera do każdej części składowej oprogramowania za pomocą jego opatrzności.

Wdrażanie tras typu Page-Not-Found

Funkcjonalność rekwizytu path w kontekście komponentu React Router Route polega na jego zdolności do przeprowadzania porównania między określoną ścieżką a bieżącym adresem URL, z ostatecznym celem określenia, czy są one zgodne, aby nawigacja zakończyła się powodzeniem.

Aby rozwiązać przypadki, w których żadne dostępne trasy nie są dopasowane, możliwe jest ustanowienie wyznaczonej ścieżki, która w szczególności zarządza błędami “404 Page Not Found”. Włączając taką trasę, użytkownicy końcowi mogą uzyskać zrozumiałe odpowiedzi w okolicznościach, w których próbują uzyskać dostęp do nieprawidłowego adresu URL.

Aby włączyć trasę 404 do aplikacji, należy umieścić ją w komponencie RouteComponent w następujący sposób:

 // using the Route component
<Route path="*" element={<NotFound />} />

 // using createBrowserRouter
{ path: "*", element: <NotFound />, }, 

Stworzymy niestandardowy komponent NotFound , który rozszerza wbudowany w React komponent NotFoundRouteComponent . Następnie użyjemy tego komponentu do renderowania, gdy żądana strona nie zostanie znaleziona na serwerze. Aby to osiągnąć, musimy najpierw zainstalować Axios do wykonywania żądań API i stylizowania naszych komponentów za pomocą modułów CSS. Na koniec zaimportujemy i wykorzystamy te pakiety w naszym kodzie.

Gwiazdka (*) służy jako symbol zastępczy dla dowolnych znaków w wyrażeniu regularnym, umożliwiając uwzględnienie przypadków, w których żadna konkretna trasa nie została dopasowana do danego adresu URL.

Nawigacja programowa przy użyciu haka useNavigate

Wykorzystanie haka useNavigate stanowi instrumentalne podejście do zarządzania nawigacją w aplikacjach. W szczególności hak ten okazuje się korzystny podczas nawigacji w połączeniu z działaniami lub zdarzeniami inicjowanymi przez użytkownika, w tym naciśnięciami przycisków i przesłaniem formularzy.

Rzeczywiście, należy pobrać hak utilizeNavigate z cenionego pakietu React Router, aby ułatwić operacje nawigacyjne poprzez implementację komponentu funkcjonalnego About.jsx.

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

Włączenie elementu interfejsu użytkownika do układu aplikacji, który po aktywacji przekierowuje użytkownika do wyznaczonej ścieżki.

 function About() {
  const navigate = useNavigate();

  const handleButtonClick = () => {
    navigate("/");
  };

  return (
    <>
      // Rest of the code ...
      <button onClick={handleButtonClick}>
    </>
  );
}

export default About; 

Ważne jest, aby pamiętać, że chociaż hak useNavigate i hak useNavigation, które zostały wprowadzone w React Router w wersji 6, mają podobne konwencje nazewnictwa, mają różne funkcje i cele.

Wykorzystanie haka useNavigation zapewnia dostęp do istotnych informacji dotyczących nawigacji, w tym bieżącego stanu nawigacji i różnych dodatkowych szczegółów. Taka funkcjonalność może być korzystna w renderowaniu komponentów interfejsu użytkownika, takich jak wskaźniki ładowania, które oferują wizualną reprezentację trwających operacji.

Z pewnością oto dopracowana wersja podanego przykładu demonstrująca implementację haka useNavigation:

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

function SubmitButton() {
  const navigation = useNavigation();

  const buttonText =
    navigation.state === "submitting"
      ? "Saving..."
      : navigation.state === "loading"
        ? "Saved!"
        : "Go";

  return <button type="submit">{buttonText}</button>;
} 

Podany fragment kodu demonstruje funkcjonalny komponent React o nazwie “SubmitButton”, który wykorzystuje niestandardowy hak “useNavigation” w celu uzyskania bieżącego stanu nawigacji. Umożliwia to dynamiczną aktualizację etykiety przycisku w odpowiedzi na zmiany w interakcji użytkownika z aplikacją.

Pomimo ich różnych funkcji, możliwe jest zastosowanie zarówno haków “useNavigate”, jak i “useNavigation” w tandemie. Pierwszy z nich służy jako mechanizm inicjujący procesy nawigacyjne, podczas gdy drugi zapewnia dostęp do danych nawigacyjnych na żywo, które określają rodzaj informacji zwrotnych interfejsu użytkownika, które mają być wyświetlane w środowisku przeglądarki.

Korzystanie z haka useRoutes

Obecny hak umożliwia specyfikację ścieżek tras wraz z ich skorelowanymi komponentami w kompleksowy sposób, ułatwiając w ten sposób proces dopasowywania tras i wyświetlania odpowiednich komponentów.

Z pewnością oto elegancka ilustracja pokazująca zastosowanie tego narzędzia:

 import { useRoutes } from 'react-router-dom';
import Dashboard from './Dashboard';
import About from './About';

const routes = [
  {
    path: '/',
    element: <Dashboard/>,
  },
  {
    path: '/about',
    element: <About />,
  },
];

function App() {
  const routeResult = useRoutes(routes);
  return routeResult;
}

export default App; 

Obiekt routes służy jako pośrednik między adresami URL a odpowiadającymi im komponentami w aplikacji. Wykorzystując ten obiekt, komponent aplikacji może z powodzeniem mapować bieżący adres URL do odpowiedniego komponentu, wykorzystując proces dopasowywania ustanowiony za pomocą zdefiniowanych tras.

Wykorzystanie tej funkcji zapewnia precyzyjne zarządzanie architekturą routingu, ułatwiając opracowanie dostosowanych mechanizmów obsługi tras do konkretnych wymagań aplikacji.

Obsługa routingu w aplikacjach React

React z natury nie oferuje rozwiązania do zarządzania nawigacją w aplikacji; jednak React Router został zaprojektowany specjalnie w celu zaspokojenia tej potrzeby, zapewniając kompleksowy zestaw komponentów routingu i funkcjonalności, które ułatwiają tworzenie wysoce responsywnych i intuicyjnych interfejsów. Wykorzystując te funkcje, programiści są w stanie tworzyć aplikacje z płynnymi możliwościami nawigacji, zapewniając jednocześnie optymalne wrażenia użytkownika.