A React Router URL paramétereivel kapcsolatos fő probléma az, hogy nehéz lehet dinamikus útvonalakban használni őket. Ennek az az oka, hogy az URL-paraméterek statikusak, és az útvonal létrehozása után nem módosíthatók. Ez azt jelenti, hogy ha a felhasználónak egy másik oldalt kell elérnie különböző paraméterekkel, akkor minden paraméterkombinációhoz új útvonalat kell létrehoznia. Ezenkívül az URL-paraméterek használatakor nehéz lehet nyomon követni az összes lehetséges kombinációt, és megbizonyosodni arról, hogy mindegyiket megfelelően kezeli az útválasztó.
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.
);
};
Ez a kód beállít egy React Routert, amely az URL-ből származó felhasználónévvel rendelkező oldalt jelenít meg.
1. Az első sor összetevőket importál a React Router DOM könyvtárából.
2. Az App függvény visszaadja a Router összetevőt egy Route összetevővel, amely meghatározza, hogy minden „/user/” karakterrel kezdődő URL-nek meg kell jelenítenie a UserPage összetevőt.
3. A UserPage függvény a useParams() segítségével lekéri a felhasználónevet az URL-ből, majd üdvözlő üzenetet jelenít meg ezzel a felhasználónévvel.
URL-paraméterek
A React Router URL-paraméterei olyan adatok, amelyeket az URL részeként továbbítanak az útvonalnak. Lehetővé teszik a fejlesztők számára, hogy dinamikus információkat adjanak át egy útvonalnak, például azonosítót vagy lekérdezési karakterláncot. Ez használható dinamikus útvonalak létrehozására, amelyek felhasználhatók például bizonyos elemek megjelenítésére egy adatbázisból vagy tartalom szűrésére a felhasználói bevitel alapján. A React Router eszközöket biztosít az URL-paraméterek eléréséhez és manipulálásához, megkönnyítve ezek használatát az alkalmazásban.
Hogyan szerezheti be az URL-paramétereket egy útvonalból a React alkalmazásban
A React Routerben a useParams hook segítségével érheti el az útvonal URL-paramétereit. Ez a horog egy objektumot ad vissza, amely az URL-paraméterek kulcs-érték párjait tartalmazza. Például, ha az útvonal a /user/:id, akkor az id paramétert a useParams().id paranccsal érheti el.
