Основна проблема, пов’язана з параметрами 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-адреси. Вони дозволяють розробникам передавати в маршрут динамічну інформацію, наприклад ідентифікатор або рядок запиту. Це можна використовувати для створення динамічних маршрутів, які можна використовувати для таких речей, як відображення певних елементів із бази даних або фільтрування вмісту на основі введення користувача. React Router надає інструменти для доступу та керування параметрами URL-адреси, що полегшує їх використання у вашій програмі.
Як отримати параметри URL-адреси з маршруту в React
У React Router ви можете отримати доступ до параметрів URL-адреси з маршруту за допомогою хука useParams. Цей хук повертає об’єкт, що містить пари ключ-значення параметрів URL-адреси. Наприклад, якщо ваш маршрут /user/:id, ви можете отримати доступ до параметра id за допомогою useParams().id.
