Glavni problem u vezi sa parametrima URL-a React Router-a je da ih je teško koristiti u dinamičkim rutama. To je zato što su URL parametri statični i ne mogu se mijenjati nakon kreiranja rute. To znači da ako korisnik treba da pristupi drugoj stranici s različitim parametrima, morat će kreirati novu rutu za svaku kombinaciju parametara. Osim toga, kada koristite URL parametre, može biti teško pratiti sve moguće kombinacije i osigurati da ruter 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 renderiranje stranice s korisničkim imenom iz URL-a.
1. Prvi red uvozi komponente iz React Router DOM biblioteke.
2. Funkcija App vraća komponentu Router sa komponentom Route unutar nje, koja specificira da bilo koji URL koji počinje sa “/user/” treba da prikaže komponentu UserPage.
3. Funkcija UserPage koristi useParams() da dobije korisničko ime iz URL-a, a zatim prikazuje pozdrav koristeći to korisničko ime.
URL parametri
URL parametri u React Routeru su dijelovi podataka koji se prosljeđuju ruti kao dio URL-a. Oni omogućavaju programerima da proslijede dinamičke informacije na rutu, kao što je ID ili string upita. Ovo se može koristiti za kreiranje dinamičkih ruta koje se mogu koristiti za stvari poput prikazivanja određenih stavki iz baze podataka ili filtriranja sadržaja na osnovu korisničkog unosa. React Router pruža alate za pristup i manipulaciju URL parametrima, što olakšava njihovo korištenje u vašoj aplikaciji.
Kako dobiti URL parametre iz rute u Reactu
U React Router-u možete pristupiti URL parametrima iz 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 parametru id pomoću useParams().id.
