Jak používat React Router V6: Průvodce pro začátečníky

React Router je nejoblíbenější knihovna, kterou můžete použít k implementaci směrování v aplikacích React. Poskytuje přístup založený na komponentách ke zpracování různých úloh směrování, včetně navigace po stránkách, parametrů dotazů a mnoha dalších.

React Router V6 zavádí některé významné změny ve směrovacím algoritmu, které řeší úskalí, která se vyskytovala v jeho dřívější verzi, a poskytují vylepšené řešení směrování.

Začínáme s routováním pomocí React Router V6

Začít, vytvořit aplikaci React. Alternativně, nastavit projekt React pomocí Vite. Po vytvoření projektu pokračujte a nainstalujte reagovat-router-dom balík.

npm install react-router-dom

Vytváření tras pomocí React Router

Chcete-li vytvořit trasy, začněte tím, že celou aplikaci zabalíte do a BrowserRouter komponent. Aktualizujte kód ve svém index.jsx nebo main.jsx soubor takto:

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





instagram viewer
ReactDOM.createRoot(document.getElementById('root')).render(



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

Zabalení komponenty App do komponenty BrowserRouter zajistí, že celá aplikace získá přístup ke kontextu směrování a funkcím, které nabízí knihovna React Router.

Použití komponenty Routes

Jakmile aplikaci zabalíte do komponenty BrowserRouter, můžete definovat své trasy.

The Trasy komponenta je vylepšením Přepínač komponentu, kterou dříve používal React Router v5. Tato komponenta podporuje relativní směrování, automatické řazení tras a schopnost pracovat s vnořenými trasami.

Trasy obvykle přidáváte na nejvyšší úrovni vaší aplikace, často v rámci komponenty App. Můžete je však definovat na jakémkoli jiném místě v závislosti na struktuře vašeho projektu.

Otevři App.jsx soubor a nahraďte základní kód Reagujte následujícím způsobem:

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

Tato konfigurace směrování mapuje konkrétní cesty URL na odpovídající součásti stránky (Dashboard a About), které zajistí, že aplikace vykreslí příslušnou komponentu, když uživatel navštíví konkrétní URL.

Všimněte si živel prop, v rámci komponenty Route, která umožňuje předat funkční komponentu namísto pouhého názvu komponenty. To umožňuje předat rekvizity po trasách a jejich přidružené součásti.

V src adresář, vytvořte nový stránky adresář a přidejte dva nové soubory: Dashboard.jsx a O.jsx. Pokračujte a definujte funkční součásti v těchto souborech, abyste otestovali trasy.

Použití createBrowserRouter k definování tras

React Dokumentace routeru doporučuje používat createBrowserRouter komponenta k definování konfigurace směrování pro webové aplikace React. Tato součást je lehkou alternativou k BrowserRouter který jako svůj argument bere řadu cest.

Při použití této komponenty není nutné definovat vaše trasy v rámci komponenty App. Místo toho můžete nastínit všechny konfigurace trasy v rámci index.jsx nebo main.jsx soubor.

Zde je příklad, jak můžete tuto komponentu použít:

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

Konfigurace směrování používá createBrowserRouter a Poskytovatel routeru komponenty k vytvoření systému směrování pro aplikaci React.

Jediný rozdíl oproti této implementaci je však v tom, že namísto zabalení aplikace pomocí komponenty BrowserRouter používá Poskytovatel routeru součást předat Směrovač kontextu ke všem komponentám v aplikaci.

Implementace tras nenalezených stránek

The cesta prop v komponentě Route porovná poskytnutou cestu s aktuální adresou URL, aby zjistil, zda existuje shoda před vykreslením požadované komponenty.

Chcete-li zvládnout případy, kdy se žádné trasy neshodují, můžete vytvořit konkrétní trasu, která bude spravovat Stránka 404 nenalezena chyby. Zahrnutí této trasy zajišťuje, že uživatelé mohou přijímat smysluplné odpovědi v situacích, kdy přistoupili k neexistující adrese URL.

Chcete-li implementovat trasu 404, přidejte tuto trasu do komponenty Routes:

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

Poté vytvořte vlastní NotFound.jsx součást a nakonec, styl komponenty pomocí modulů CSS.

Hvězdička (*) je zástupný znak, který zpracovává scénáře, kdy žádná ze zadaných tras neodpovídá aktuální adrese URL.

Programatická navigace pomocí useNavigate Hook

The použijteNavigovat hook poskytuje programový způsob ovládání navigace v aplikacích. Tento háček je zvláště užitečný, když chcete spustit navigaci v reakci na uživatelské interakce nebo události, jako jsou kliknutí na tlačítka nebo odeslání formuláře.

Pojďme se podívat na to, jak používat použijteNavigovat háček pro programovou navigaci. Za předpokladu, že jste vytvořili O.jsx funkční komponent, importujte háček z balíčku React Router:

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

Poté přidejte tlačítko, které po kliknutí spustí navigaci na zadanou trasu.

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

 </>
 );
}
exportdefault About;

Stojí za zmínku, že háček useNavigate a háček useNavigation, představený v React Router v6, slouží odlišným účelům navzdory jejich úzce souvisejícím názvům.

Hák useNavigation umožňuje přístup k podrobnostem souvisejícím s navigací, jako je stav probíhající navigace a další specifika. To je užitečné, když chcete vykreslit prvky uživatelského rozhraní, jako jsou načítání číselníků, abyste získali vizuální zpětnou vazbu o probíhajících procesech.

Zde je příklad toho, jak můžete využít háček 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>;
}

V tomto příkladu je SubmitButton komponenta bude dynamicky aktualizovat svůj text na základě stavu navigace získaného z háku useNavigation.

I když mají tyto háčky různé role, stále je můžete používat společně. Hák useNavigate k zahájení procesu navigace a háček useNavigation k načtení podrobností navigace v reálném čase, které pak vedou k vykreslení uživatelského rozhraní pro zpětnou vazbu v prohlížeči.

Pomocí háčku userRoutes

Tento háček vám umožňuje definovat cesty trasy podél jejich odpovídajících součástí v rámci objektu. Následně se pomocí háčku spárují trasy a zobrazí příslušné komponenty.

Zde je jednoduchý příklad použití háku:

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;

V tomto příkladu je trasy objekt definuje mapování URL cest na komponenty. The Aplikace komponenta pak použije tento háček k přiřazení aktuální adresy URL a vykreslení příslušné komponenty na základě odpovídající trasy.

Použití tohoto háku vám poskytuje podrobnou kontrolu nad vaší směrovací logikou a umožňuje vám snadno vytvořit vlastní logiku zpracování trasy pro vaši aplikaci.

Manipulace se směrováním v aplikacích React

Ačkoli samotný React neobsahuje předem vytvořený mechanismus pro zpracování úloh směrování, React Router tuto mezeru vyplňuje. Poskytuje různé směrovací komponenty a pomocné funkce, které můžete snadno použít k vytváření interaktivních, uživatelsky přívětivých aplikací.