Pagrindinė problema, susijusi su „React Router“ URL parametrais, yra ta, kad juos gali būti sunku naudoti dinaminiuose maršrutuose. Taip yra todėl, kad URL parametrai yra statiniai ir jų negalima pakeisti sukūrus maršrutą. Tai reiškia, kad jei vartotojas turi patekti į kitą puslapį su skirtingais parametrais, kiekvienam parametrų deriniui jis turės sukurti naują maršrutą. Be to, naudojant URL parametrus, gali būti sunku sekti visus galimus derinius ir įsitikinti, kad maršruto parinktuvas tinkamai tvarko kiekvieną iš jų.
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.
);
};
Šis kodas nustato „React Router“, kad būtų pateiktas puslapis su vartotojo vardu iš URL.
1. Pirmoji eilutė importuoja komponentus iš React Router DOM bibliotekos.
2. Programos funkcija grąžina maršrutizatoriaus komponentą, kurio viduje yra maršruto komponentas, kuris nurodo, kad bet koks URL, prasidedantis raide „/user/“, turėtų pateikti „UserPage“ komponentą.
3. Funkcija UserPage naudoja useParams(), kad gautų vartotojo vardą iš URL, ir tada, naudodama tą vartotojo vardą, pateikia sveikinimą.
URL parametrai
URL parametrai React Router yra duomenų dalys, kurios perduodamos maršrutui kaip URL dalis. Jie leidžia kūrėjams perduoti maršrutui dinaminę informaciją, pvz., ID arba užklausos eilutę. Tai gali būti naudojama kuriant dinaminius maršrutus, kurie gali būti naudojami, pavyzdžiui, rodyti konkrečius elementus iš duomenų bazės arba filtruoti turinį pagal vartotojo įvestį. „React Router“ suteikia įrankius, leidžiančius pasiekti ir valdyti URL parametrus, todėl juos lengva naudoti programoje.
Kaip gauti URL parametrus iš maršruto „React“.
„React Router“ galite pasiekti maršruto URL parametrus naudodami „useParams“ kabliuką. Šis kabliukas grąžina objektą, kuriame yra URL parametrų raktų ir reikšmių poros. Pavyzdžiui, jei jūsų maršrutas yra /user/:id, id parametrą galite pasiekti naudodami useParams().id.
