Principala problemă legată de parametrii URL React Router este că pot fi dificil de utilizat în rutele dinamice. Acest lucru se datorează faptului că parametrii URL sunt statici și nu pot fi modificați după ce traseul a fost creat. Aceasta înseamnă că, dacă un utilizator trebuie să acceseze o pagină diferită cu parametri diferiți, va trebui să creeze o nouă rută pentru fiecare combinație de parametri. În plus, atunci când utilizați parametri URL, poate fi dificil să urmăriți toate combinațiile posibile și să vă asigurați că fiecare dintre ele este gestionată corect de către router.
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.
);
};
Acest cod configurează un router React pentru a reda o pagină cu un nume de utilizator din URL.
1. Prima linie importă componente din biblioteca React Router DOM.
2. Funcția App returnează componenta Router cu o componentă Route în interior, care specifică că orice URL care începe cu „/utilizator/” ar trebui să redă componenta UserPage.
3. Funcția UserPage folosește useParams() pentru a obține numele de utilizator din URL și apoi redă un salut folosind acel nume de utilizator.
Parametri URL
Parametrii URL din React Router sunt date care sunt transmise unei rute ca parte a URL-ului. Acestea permit dezvoltatorilor să transmită informații dinamice către o rută, cum ar fi un ID sau un șir de interogare. Aceasta poate fi folosită pentru a crea rute dinamice care pot fi folosite pentru lucruri precum afișarea anumitor elemente dintr-o bază de date sau filtrarea conținutului pe baza intrării utilizatorului. React Router oferă instrumente pentru accesarea și manipularea parametrilor URL, ușurând utilizarea acestora în aplicația dvs.
Cum obțineți parametrii URL de la o rută în React
În React Router, puteți accesa parametrii URL de pe o rută folosind cârligul useParams. Acest cârlig returnează un obiect care conține perechi cheie-valoare ale parametrilor URL. De exemplu, dacă ruta dvs. este /user/:id, puteți accesa parametrul id cu useParams().id.
