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

React Router to najpopularniejsza biblioteka, której można używać do implementowania routingu w aplikacjach React. Zapewnia oparte na komponentach podejście do obsługi różnych zadań routingu, w tym nawigacji po stronach, parametrów zapytań i wielu innych.

React Router V6 wprowadza kilka znaczących zmian w algorytmie routingu, aby zaradzić pułapkom obecnym w jego wcześniejszej wersji i zapewnić ulepszone rozwiązanie routingu.

Pierwsze kroki z routingiem przy użyciu React Router V6

Rozpocząć, utwórz aplikację React. Alternatywnie, skonfiguruj projekt React przy użyciu Vite. Po utworzeniu projektu przejdź dalej i zainstaluj plik reagują-router-dom pakiet.

npm install react-router-dom

Tworzenie tras przy użyciu routera React

Aby utworzyć trasy, zacznij od opakowania całej aplikacji za pomocą pliku PrzeglądarkaRouter część. Zaktualizuj kod w swoim indeks.jsx Lub główny.jsx plik w następujący sposób:

import React from





instagram viewer

'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(



 </Router>
 </React.StrictMode>,
)

Opakowanie komponentu App komponentem BrowserRouter gwarantuje, że cała aplikacja uzyska dostęp do kontekstu routingu i funkcji oferowanych przez bibliotekę React Router.

Korzystanie z komponentu Trasy

Po opakowaniu aplikacji komponentem BrowserRouter możesz zdefiniować swoje trasy.

The Trasy elementem jest ulepszenie Przełącznik komponent, który był wcześniej używany przez React Router v5. Ten komponent obsługuje routing względny, automatyczny ranking tras i możliwość pracy z trasami zagnieżdżonymi.

Zwykle trasy dodajesz na najwyższym poziomie aplikacji, często w komponencie aplikacji. Można je jednak zdefiniować w dowolnym innym miejscu, w zależności od struktury projektu.

Otworzyć Aplikacja.jsx plik i zastąp szablon. Zareaguj na poniższy kod:

import'./App.css'
import { Routes, Route } from'react-router-dom';
import Dashboard from'./pages/Dashboard';
import About from'./pages/About';
functionApp() {
return (
 <>

"/" element={} />
"/about" element={} />
 </Routes>
 </>
 )
}
exportdefault App

Ta konfiguracja routingu odwzorowuje określone ścieżki URL na odpowiednie komponenty strony (Dashboard i Informacje), zapewniając, że aplikacja renderuje odpowiedni komponent, gdy użytkownik odwiedza konkretną witrynę Adres URL.

Zwróć uwagę na element prop w komponencie Route, który pozwala przekazać komponent funkcjonalny, a nie samą nazwę komponentu. Umożliwia to przekazywanie rekwizytów wzdłuż tras i powiązanych z nimi komponentów.

w źródło katalog, utwórz nowy strony katalog i dodaj dwa nowe pliki: Panel kontrolny.jsx I Informacje o.jsx. Śmiało, zdefiniuj komponenty funkcjonalne w tych plikach, aby przetestować trasy.

Używanie createBrowserRouter do definiowania tras

Reaguj na dokumentację routera zaleca korzystanie z utwórzBrowserRouter komponent do definiowania konfiguracji routingu dla aplikacji internetowych React. Ten komponent jest lekką alternatywą dla PrzeglądarkaRouter który jako argument przyjmuje tablicę tras.

Korzystając z tego komponentu, nie ma potrzeby definiowania tras w komponencie aplikacji. Zamiast tego możesz zarysować wszystkie konfiguracje tras w pliku indeks.jsx Lub główny.jsx plik.

Oto przykład wykorzystania tego komponentu:

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>
);

Konfiguracja routingu wykorzystuje utwórzBrowserRouter I Dostawca routera komponenty do stworzenia systemu routingu dla aplikacji React.

Jednak jedyną różnicą w tej implementacji jest to, że zamiast opakowywać aplikację za pomocą komponentu BrowserRouter, używa ona Dostawca routera komponent do przekazania Routera kontekst dla wszystkich komponentów aplikacji.

Implementowanie tras typu „nie znaleziono strony”.

The ścieżka prop w komponencie Route porównuje podaną ścieżkę z bieżącym adresem URL, aby określić, czy istnieje dopasowanie, przed wyrenderowaniem wymaganego komponentu.

Aby obsłużyć przypadki, w których żadna trasa nie pasuje, możesz utworzyć konkretną trasę, która będzie zarządzana Nie znaleziono błędów strony 404. Uwzględnienie tej trasy gwarantuje, że użytkownicy będą mogli otrzymać sensowne odpowiedzi w sytuacjach, gdy uzyskali dostęp do nieistniejącego adresu URL.

Aby zaimplementować trasę 404, dodaj tę trasę w komponencie Trasy:

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

Następnie utwórz niestandardowy NotFound.jsx komponent i wreszcie stylizuj komponent za pomocą modułów CSS.

Gwiazdka (*) to znak wieloznaczny obsługujący scenariusze, w których żadna z określonych tras nie pasuje do bieżącego adresu URL.

Nawigacja programowa przy użyciu haka useNavigate

The użyjNawiguj hook zapewnia programowy sposób obsługi nawigacji w aplikacjach. Ten hak jest szczególnie przydatny, gdy chcesz uruchomić nawigację w odpowiedzi na interakcje użytkownika lub zdarzenia, takie jak kliknięcia przycisków lub przesłania formularzy.

Przyjrzyjmy się, jak korzystać z użyjNawiguj hak do nawigacji programowej. Zakładając, że utworzyłeś plik Informacje o.jsx komponent funkcjonalny, zaimportuj hak z pakietu React Router:

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

Następnie dodaj przycisk, którego kliknięcie uruchamia nawigację do określonej trasy.

functionAbout() {
const navigate = useNavigate();
const handleButtonClick = () => {
 navigate("/");
 };
return (
 <>
// Rest of the code ...

 </>
 );
}
exportdefault About;

Warto wspomnieć, że haki useNavigate i hook useNavigation, wprowadzone w React Router v6, pomimo blisko spokrewnionych nazw, służą różnym celom.

Hak useNavigation umożliwia dostęp do szczegółów związanych z nawigacją, takich jak bieżący stan nawigacji i inne szczegóły. Jest to przydatne, gdy chcesz renderować elementy interfejsu użytkownika, takie jak ładowanie pokręteł, aby zapewnić wizualną informację zwrotną na temat trwających procesów.

Oto przykład wykorzystania haka useNavigation.

import { useNavigation } from"react-router-dom";
functionSubmitButton() {
const navigation = useNavigation();
const buttonText =
 navigation.state "submitting"
? "Saving..."
: navigation.state "loading"
? "Saved!"
: "Go";
return<buttontype="submit">{buttonText}button>;
}

W tym przykładzie Przycisk Prześlij komponent będzie dynamicznie aktualizował swój tekst w oparciu o stan nawigacji uzyskany z haka useNavigation.

Mimo że te haczyki pełnią różne role, nadal można ich używać razem. Hak useNavigate do inicjowania procesu nawigacji i hak useNavigation do pobierania szczegółów nawigacji w czasie rzeczywistym, które następnie kierują rodzajem interfejsu użytkownika z informacją zwrotną do renderowania w przeglądarce.

Korzystanie z haka useRoutes

Ten zaczep umożliwia zdefiniowanie ścieżek tras wraz z odpowiadającymi im komponentami w obiekcie. Następnie hak służy do dopasowywania tras i wyświetlania odpowiednich komponentów.

Oto prosty przykład użycia haka:

import { useRoutes } from'react-router-dom';
import Dashboard from'./Dashboard';
import About from'./About';
const routes = [
 {
 path: '/',
 element: <Dashboard/>,
 },
 {
 path: '/about',
 element: <About />,
 },
];
functionApp() {
const routeResult = useRoutes(routes);
return routeResult;
}
exportdefault App;

W tym przykładzie trasy obiekt definiuje mapowanie ścieżek URL na komponenty. The Aplikacja komponent następnie używa tego haka, aby dopasować bieżący adres URL i wyrenderować odpowiedni komponent na podstawie dopasowanej trasy.

Użycie tego haka zapewnia szczegółową kontrolę nad logiką routingu i umożliwia łatwe tworzenie niestandardowej logiki obsługi tras dla Twojej aplikacji.

Obsługa routingu w aplikacjach React

Chociaż sam React nie zawiera gotowego mechanizmu do obsługi zadań routingu, React Router wypełnia tę lukę. Udostępnia różne komponenty routingu i funkcje narzędziowe, których można łatwo używać do tworzenia interaktywnych, przyjaznych dla użytkownika aplikacji.