React Routeri URL-i parameetritega seotud peamine probleem on see, et neid võib dünaamilistel marsruutidel olla keeruline kasutada. Selle põhjuseks on asjaolu, et URL-i parameetrid on staatilised ja neid ei saa pärast marsruudi loomist muuta. See tähendab, et kui kasutajal on vaja pääseda erinevate parameetritega erinevale lehele, peab ta looma iga parameetrikombinatsiooni jaoks uue marsruudi. Lisaks võib URL-i parameetrite kasutamisel olla keeruline jälgida kõiki võimalikke kombinatsioone ja veenduda, et ruuter neid kõiki õigesti käsitleb.
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.
);
};
See kood seadistab Reacti ruuteri, et renderdada URL-ist kasutajanimega leht.
1. Esimene rida impordib komponendid React Router DOM teegist.
2. Rakenduse funktsioon tagastab komponendi Router koos selle sees oleva komponendiga Route, mis määrab, et iga URL, mis algab tähega „/user/”, peaks renderdama komponendi UserPage.
3. Funktsioon UserPage kasutab URL-ist kasutajanime hankimiseks funktsiooni useParams() ja renderdab seejärel seda kasutajanime kasutades tervituse.
URL-i parameetrid
React Routeri URL-i parameetrid on andmed, mis edastatakse marsruudile URL-i osana. Need võimaldavad arendajatel edastada marsruudile dünaamilist teavet, näiteks ID-d või päringustringi. Seda saab kasutada dünaamiliste marsruutide loomiseks, mida saab kasutada näiteks konkreetsete üksuste kuvamiseks andmebaasist või sisu filtreerimiseks kasutaja sisendi põhjal. React Router pakub tööriistu URL-i parameetritele juurdepääsuks ja nendega manipuleerimiseks, muutes nende kasutamise rakenduses lihtsaks.
Kuidas hankida Reactis marsruudilt URL-i parameetrid
Rakenduses React Router pääsete marsruudi URL-i parameetritele juurde, kasutades konksu useParams. See konks tagastab objekti, mis sisaldab URL-i parameetrite võtme-väärtuse paare. Näiteks kui teie marsruut on /user/:id, pääsete id-parameetrile juurde käsuga useParams().id.
