Problemi kryesor në lidhje me parametrat e URL-ve të React Router është se ato mund të jenë të vështira për t'u përdorur në rrugët dinamike. Kjo për shkak se parametrat e URL-së janë statike dhe nuk mund të ndryshohen pasi të jetë krijuar rruga. Kjo do të thotë që nëse një përdorues duhet të hyjë në një faqe të ndryshme me parametra të ndryshëm, ai do të duhet të krijojë një rrugë të re për çdo kombinim parametrash. Për më tepër, kur përdorni parametrat e URL-së, mund të jetë e vështirë të mbani gjurmët e të gjitha kombinimeve të mundshme dhe të siguroheni që secili prej tyre të trajtohet siç duhet nga ruteri.
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.
);
};
Ky kod po konfiguron një Router React për të dhënë një faqe me një emër përdoruesi nga URL-ja.
1. Rreshti i parë importon komponentë nga biblioteka React Router DOM.
2. Funksioni App e kthen komponentin Router me një komponent Route brenda tij, i cili specifikon se çdo URL që fillon me "/user/" duhet të japë komponentin UserPage.
3. Funksioni UserPage përdor useParams() për të marrë emrin e përdoruesit nga URL-ja dhe më pas jep një përshëndetje duke përdorur atë emër përdoruesi.
Parametrat e URL-së
Parametrat e URL-së në React Router janë pjesë të të dhënave që i kalohen një rruge si pjesë e URL-së. Ato lejojnë zhvilluesit të kalojnë informacione dinamike në një rrugë, të tillë si një ID ose varg pyetjesh. Kjo mund të përdoret për të krijuar rrugë dinamike që mund të përdoren për gjëra të tilla si shfaqja e artikujve të veçantë nga një bazë të dhënash ose filtrimi i përmbajtjes bazuar në të dhënat e përdoruesit. React Router ofron mjete për qasjen dhe manipulimin e parametrave të URL-së, duke e bërë të lehtë përdorimin e tyre në aplikacionin tuaj.
Si i merrni parametrat e URL-së nga një rrugë në React
Në React Router, ju mund të përdorni parametrat e URL-së nga një rrugë duke përdorur grepin useParams. Ky grep kthen një objekt që përmban çifte çelës-vlerë të parametrave të URL-së. Për shembull, nëse rruga juaj është /user/:id, mund të aksesoni parametrin id me useParams().id.
