Вирішено: додавання параметрів до маршрутизатора URL-адреси

Основна проблема, пов’язана з додаванням параметрів до URL React Router, полягає в тому, що користувачі можуть легко маніпулювати параметрами. Це може призвести до проблем із безпекою, оскільки зловмисники потенційно можуть використовувати параметри для отримання доступу до неавторизованих ресурсів або даних. Крім того, якщо значення параметрів не перевірено належним чином, це може призвести до несподіваної поведінки програми. Нарешті, якщо додати занадто багато параметрів, це може спричинити проблеми з продуктивністю через збільшення складності URL-адреси.

import {
  BrowserRouter as Router,
  Route,
  Link,
  useParams
} from "react-router-dom";

 <Router>
    <Route path="/user/:username">
      <User />
    </Route>

    <Link to="/user/john">John</Link>

    function User() {
      let { username } = useParams();

      return (
        <div>{username}</div>   // renders 'john' when the link is clicked. 
      );  
    }    

 </Router>

1. імпортуйте { BrowserRouter як Router, Route, Link, useParams } з “react-router-dom”;
// Це імпортує компоненти з бібліотеки react-router-dom, які використовуватимуться в цьому коді.

2. // Це створює компонент маршрутизатора, який оброблятиме навігацію між різними маршрутами.

3. // Це створює маршрут із динамічним параметром 'username'.

4. // Це відображає компонент користувача, коли цей маршрут збігається.

5. John // Це створює посилання на маршрут /user/john, який відображатиме компонент User з 'john' як параметр імені користувача, якщо натиснути на нього.

6. function User() { //Це функціональний компонент, який приймає ім’я користувача як аргумент і відображає його всередині тегів div, коли викликається клацанням посилання над ним.

7. let { ім'я користувача } = useParams(); //Це використовує деструктуризацію для отримання доступу до імені користувача через useParams().

8. повернення (

); //Це повертає елемент div, що містить будь-яке значення, передане в ім’я користувача, яке в даному випадку буде «john».

Що таке маршрутизатор React

React Router — це бібліотека маршрутизації для програм React. Він надає основні компоненти та функції, необхідні для створення односторінкової програми (SPA) із навігацією між різними сторінками. Це дозволяє розробникам визначати маршрути, які є шляхами, що відображаються до певних компонентів програми. React Router також надає такі функції, як перенаправлення, динамічне зіставлення маршрутів і параметри запиту.

Параметри URL-адреси

Параметри URL-адреси в React Router дозволяють розробникам передавати динамічні дані з URL-адреси компонентам React. Це корисно для створення динамічних маршрутів, які можна використовувати для відображення різного вмісту на основі параметрів, переданих в URL-адресі. Наприклад, такий маршрут, як «/user/:id», можна використовувати для відображення сторінки профілю користувача з параметром id, переданим в URL-адресі. Параметри також можна використовувати для фільтрації даних або інших операцій, для яких потрібні динамічні дані з URL-адреси.

Як додати параметр до URL-адреси в React

Додавання параметрів до URL-адреси в React Router здійснюється за допомогою об’єкта «params». Цей об’єкт дозволяє передавати пари ключ-значення, які будуть додані до URL-адреси. Щоб додати параметр, просто додайте його до об’єкта params так:

const params = { param1: 'value1', param2: 'value2' };

Потім, створюючи свій маршрут, ви можете передати об’єкт params як аргумент таким чином:

Потім параметри буде додано до URL-адреси під час навігації до цього маршруту.