Hlavním problémem souvisejícím s parametry URL React Router je to, že mohou být obtížné použít v dynamických trasách. Důvodem je, že parametry adresy URL jsou statické a nelze je po vytvoření trasy změnit. To znamená, že pokud uživatel potřebuje přistupovat na jinou stránku s různými parametry, bude muset pro každou kombinaci parametrů vytvořit novou cestu. Při použití parametrů URL může být navíc obtížné sledovat všechny možné kombinace a ujistit se, že každý z nich je routerem správně zpracován.
import {
BrowserRouter as Router,
Route,
Link,
useParams
} from "react-router-dom";
const App = () => {
return (
<Router>
<div>
<Route path="/user/:username" component={UserPage} />
</div>
</Router>
);
};
const UserPage = () => {
let { username } = useParams(); // Get the username from the URL.
return (
<div>Hello, {username}!</div> // Render a greeting with the username.
);
};
Tento kód nastavuje směrovač React k vykreslení stránky s uživatelským jménem z adresy URL.
1. První řádek importuje komponenty z knihovny React Router DOM.
2. Funkce App vrací komponentu Router s komponentou Route uvnitř, která určuje, že jakákoli URL začínající na „/user/“ by měla vykreslit komponentu UserPage.
3. Funkce UserPage používá useParams() k získání uživatelského jména z adresy URL a poté pomocí tohoto uživatelského jména vykreslí pozdrav.
parametry URL
Parametry URL v React Router jsou kusy dat, které jsou předávány do trasy jako součást adresy URL. Umožňují vývojářům předat trase dynamické informace, jako je ID nebo řetězec dotazu. To lze použít k vytvoření dynamických tras, které lze použít pro věci, jako je zobrazení konkrétních položek z databáze nebo filtrování obsahu na základě vstupu uživatele. React Router poskytuje nástroje pro přístup a manipulaci s parametry URL, což usnadňuje jejich použití ve vaší aplikaci.
Jak získáte parametry URL z trasy v Reactu
V React Router můžete přistupovat k parametrům URL z trasy pomocí háčku useParams. Tento háček vrací objekt obsahující páry klíč–hodnota parametrů URL. Pokud je například vaše trasa /user/:id, můžete k parametru id přistupovat pomocí useParams().id.
