Suurin React Router URL -parametreihin liittyvä ongelma on, että niitä voi olla vaikea käyttää dynaamisilla reiteillä. Tämä johtuu siitä, että URL-parametrit ovat staattisia eikä niitä voi muuttaa reitin luomisen jälkeen. Tämä tarkoittaa, että jos käyttäjän on päästävä eri sivulle eri parametreilla, hänen on luotava uusi reitti kullekin parametriyhdistelmälle. Lisäksi URL-parametreja käytettäessä voi olla vaikeaa seurata kaikkia mahdollisia yhdistelmiä ja varmistaa, että reititin käsittelee niitä oikein.
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.
);
};
Tämä koodi määrittää React-reitittimen hahmontamaan sivun käyttäjänimellä URL-osoitteesta.
1. Ensimmäinen rivi tuo komponentteja React Router DOM -kirjastosta.
2. Sovellustoiminto palauttaa Router-komponentin, jonka sisällä on Route-komponentti, joka määrittää, että minkä tahansa URL-osoitteen, joka alkaa kirjaimella /user/, tulee tuottaa UserPage-komponentti.
3. UserPage-funktio käyttää useParams()-komentoa käyttäjänimen hakemiseen URL-osoitteesta ja hahmontaa sitten tervehdyksen kyseisellä käyttäjätunnuksella.
URL-parametrit
React Routerin URL-parametrit ovat tietoja, jotka välitetään reitille osana URL-osoitetta. Niiden avulla kehittäjät voivat välittää reitille dynaamisia tietoja, kuten tunnuksen tai kyselymerkkijonon. Tätä voidaan käyttää luomaan dynaamisia reittejä, joita voidaan käyttää esimerkiksi tiettyjen tietokannan kohteiden näyttämiseen tai sisällön suodattamiseen käyttäjän syötteen perusteella. React Router tarjoaa työkaluja URL-parametrien käyttämiseen ja muokkaamiseen, mikä tekee niiden käyttämisestä sovelluksessasi helppoa.
Kuinka saat URL-parametrit reitiltä Reactissa
React Routerissa voit käyttää reitin URL-parametreja useParams-koukun avulla. Tämä koukku palauttaa objektin, joka sisältää URL-parametrien avain-arvo-pareja. Jos reittisi on esimerkiksi /user/:id, voit käyttää id-parametria komennolla useParams().id.
