Основният проблем, свързан с URL параметрите на React Router, е, че те могат да бъдат трудни за използване в динамични маршрути. Това е така, защото URL параметрите са статични и не могат да се променят след създаването на маршрута. Това означава, че ако даден потребител трябва да получи достъп до различна страница с различни параметри, той ще трябва да създаде нов маршрут за всяка комбинация от параметри. Освен това, когато използвате URL параметри, може да е трудно да следите всички възможни комбинации и да се уверите, че всяка от тях се обработва правилно от рутера.
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.
);
};
Този код настройва React Router за изобразяване на страница с потребителско име от URL адреса.
1. Първият ред импортира компоненти от DOM библиотеката на React Router.
2. Функцията App връща компонента Router с компонент Route вътре в него, който указва, че всеки URL, започващ с „/user/“, трябва да рендира компонента UserPage.
3. Функцията UserPage използва useParams(), за да получи потребителското име от URL адреса и след това изобразява поздрав, използвайки това потребителско име.
URL параметри
URL параметрите в React Router са части от данни, които се предават на маршрут като част от URL адреса. Те позволяват на разработчиците да предават динамична информация към маршрут, като ID или низ на заявка. Това може да се използва за създаване на динамични маршрути, които могат да се използват за неща като показване на конкретни елементи от база данни или филтриране на съдържание въз основа на въвеждане от потребителя. React Router предоставя инструменти за достъп и манипулиране на URL параметри, което улеснява използването им във вашето приложение.
Как получавате URL параметрите от маршрут в React
В React Router можете да получите достъп до URL параметрите от маршрут, като използвате куката useParams. Тази кука връща обект, съдържащ двойки ключ-стойност на URL параметрите. Например, ако вашият маршрут е /user/:id, можете да получите достъп до параметъра id с useParams().id.
