Glavna težava, povezana s parametri URL-ja React Router, je, da jih je težko uporabljati v dinamičnih poteh. To je zato, ker so parametri URL-ja statični in jih ni mogoče spremeniti, ko je bila pot ustvarjena. To pomeni, da če mora uporabnik dostopati do druge strani z različnimi parametri, bo moral ustvariti novo pot za vsako kombinacijo parametrov. Poleg tega je lahko pri uporabi parametrov URL-ja težko slediti vsem možnim kombinacijam in se prepričati, da usmerjevalnik vsako pravilno obravnava.
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.
);
};
Ta koda nastavlja React Router za upodabljanje strani z uporabniškim imenom iz URL-ja.
1. Prva vrstica uvozi komponente iz knjižnice DOM React Router.
2. Funkcija App vrne komponento Router s komponento Route znotraj nje, ki določa, da mora vsak URL, ki se začne z »/user/«, upodobiti komponento UserPage.
3. Funkcija UserPage uporablja useParams(), da pridobi uporabniško ime iz URL-ja in nato upodobi pozdrav z uporabo tega uporabniškega imena.
Parametri URL-ja
Parametri URL-ja v React Routerju so deli podatkov, ki se posredujejo poti kot del URL-ja. Razvijalcem omogočajo, da poti posredujejo dinamične informacije, kot je ID ali poizvedbeni niz. To je mogoče uporabiti za ustvarjanje dinamičnih poti, ki jih je mogoče uporabiti za stvari, kot je prikazovanje določenih elementov iz baze podatkov ali filtriranje vsebine na podlagi uporabniškega vnosa. React Router nudi orodja za dostop do parametrov URL in manipuliranje z njimi, kar olajša njihovo uporabo v vaši aplikaciji.
Kako pridobite parametre URL iz poti v Reactu
V React Routerju lahko dostopate do parametrov URL-ja s poti s pomočjo kljuke useParams. Ta kavelj vrne objekt, ki vsebuje pare ključ-vrednost parametrov URL. Na primer, če je vaša pot /user/:id, lahko do parametra id dostopate z useParams().id.
