Каталог з декількома рівнями вкладеності React 18 react router 6

💡 Усі статті, обговорення, новини про Front-end — в одному місці. Приєднуйтесь до Front-end спільноти!

Зіштовхнулась з проблемою створення динамічного роутінгу каталог -> категорія -> субкатегорія -> субсубкатегорія -> субсубсубкатегорія
З бека приходить каталог у вигляді масиву об’єктів, де кожен з обєктів має масив дітей, де так само є обєкти з масивом дітей
наче на перший погляд простий кейс але в інеті не описаний
як реалізувати?

👍ПодобаєтьсяСподобалось0
До обраногоВ обраному0
LinkedIn
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter

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

Припустимо, ви використовуєте React та React Router для вашого фронтенду. Ось як ви можете реалізувати такий роутінг:

1. **Створіть компонент для показу категорії:**

function Category({ match }) {
  const categoryId = match.params.categoryId;
  const currentCategory = findCategoryById(categoryId); // ваша логіка для пошуку категорії по ID

  if (!currentCategory) {
    return <div>Категорія не знайдена</div>;
  }

  return (
    <div>
      <h1>{currentCategory.name}</h1>
      {currentCategory.children && currentCategory.children.map(child => (
        <Link to={`${match.url}/${child.id}`}>{child.name}</Link>
      ))}
      <Route path={`${match.path}/:categoryId`} component={Category} />
    </div>
  );
}

2. **Створіть ваш головний роутер, де ви починаєте рекурсію:**

<BrowserRouter>
  <Route path="/:categoryId" component={Category} />
</BrowserRouter>

З цією конфігурацією, коли користувач переходить на шлях `/cat1`, компонент `Category` виведе деталі `cat1` і посилання на всі його дітей. Якщо користувач клікне на одне з цих посилань, наприклад, на `/cat1/cat1_1`, компонент `Category` знову буде завантажено, але цього разу для `cat1_1`.

Таким чином, ви можете мати декілька рівнів вкладеності і все одно використовувати один і той же компонент для їх відображення.

Важливо пам’ятати, що для отримання даних про категорію (як `findCategoryById` у прикладі вище) ви, можливо, захочете використовувати контекст або стан у батьківському компоненті для уникнення непотрібних запитів до сервера на кожному рівні вкладеності.

дякую, спробувала, але на жаль не запрацювало

Починаючи з 5 версії не треба додавати початок URL в маршрути і посилання. Приклад працюючої версії — stackblitz.com/...​tackblitz-starters-12txdd

Підписатись на коментарі