Главни проблем у вези са параметрима УРЛ-а Реацт рутера је тај што их је тешко користити у динамичким рутама. То је зато што су УРЛ параметри статични и не могу се променити након креирања руте. То значи да ако корисник треба да приступи другој страници са различитим параметрима, мораће да креира нову руту за сваку комбинацију параметара. Поред тога, када користите параметре УРЛ-а, може бити тешко пратити све могуће комбинације и осигурати да рутер правилно рукује сваком од њих.
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.
);
};
Овај код подешава Реацт рутер да прикаже страницу са корисничким именом са УРЛ-а.
1. Први ред увози компоненте из Реацт Роутер ДОМ библиотеке.
2. Функција апликације враћа компоненту рутера са компонентом Роуте унутар ње, која наводи да било који УРЛ који почиње са „/усер/“ треба да прикаже компоненту УсерПаге.
3. Функција УсерПаге користи усеПарамс() за добијање корисничког имена са УРЛ-а и затим приказује поздрав користећи то корисничко име.
УРЛ параметри
Параметри УРЛ-а у Реацт Роутер-у су делови података који се прослеђују рути као део УРЛ-а. Они омогућавају програмерима да прослеђују динамичке информације рути, као што су ИД или стринг упита. Ово се може користити за креирање динамичких рута које се могу користити за ствари као што су приказивање одређених ставки из базе података или филтрирање садржаја на основу корисничког уноса. Реацт Роутер пружа алате за приступ и манипулацију УРЛ параметрима, што олакшава њихово коришћење у вашој апликацији.
Како да добијете УРЛ параметре из руте у Реацт-у
У Реацт Роутер-у можете приступити УРЛ параметрима са руте помоћу куке усеПарамс. Ова кука враћа објекат који садржи парове кључ/вредност параметара УРЛ-а. На пример, ако је ваша рута /усер/:ид, можете приступити параметру ид помоћу усеПарамс().ид.
