Glavni problem povezan s parametrima URL-a React Routera je taj što ih je teško koristiti u dinamičkim rutama. To je zato što su URL parametri statični i ne mogu se mijenjati nakon što je ruta stvorena. To znači da ako korisnik treba pristupiti drugoj stranici s različitim parametrima, morat će stvoriti novu rutu za svaku kombinaciju parametara. Osim toga, kada koristite parametre URL-a, može biti teško pratiti sve moguće kombinacije i osigurati da usmjerivač pravilno rukuje svakom od njih.
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.
);
};
Ovaj kod postavlja React Router za prikaz stranice s korisničkim imenom iz URL-a.
1. Prvi redak uvozi komponente iz React Router DOM biblioteke.
2. Funkcija App vraća komponentu Router s komponentom Route unutar nje, koja specificira da svaki URL koji počinje s “/user/” treba prikazati komponentu UserPage.
3. Funkcija UserPage koristi useParams() za dobivanje korisničkog imena iz URL-a i zatim prikazuje pozdrav koristeći to korisničko ime.
URL parametri
Parametri URL-a u React Routeru dijelovi su podataka koji se prosljeđuju ruti kao dio URL-a. Oni omogućuju programerima da proslijede dinamičke informacije ruti, kao što je ID ili niz upita. To se može koristiti za stvaranje dinamičkih ruta koje se mogu koristiti za stvari poput prikazivanja određenih stavki iz baze podataka ili filtriranja sadržaja na temelju korisničkog unosa. React Router pruža alate za pristup i manipuliranje URL parametrima, što olakšava njihovu upotrebu u vašoj aplikaciji.
Kako dobiti URL parametre iz rute u Reactu
U React Routeru možete pristupiti parametrima URL-a s rute pomoću kuke useParams. Ova kuka vraća objekt koji sadrži parove ključ-vrijednost parametara URL-a. Na primjer, ako je vaša ruta /user/:id, možete pristupiti id parametru pomoću useParams().id.
