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

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

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

Теми: Front-end, react, розробка

👍ПодобаєтьсяСподобалось0

До обраногоВ обраному0

Facebook

Twitter

Ctrl + Enter

Богдан Насушный 25.10.2023 18:45

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

Припустимо, ви використовуєте 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` у прикладі вище) ви, можливо, захочете використовувати контекст або стан у батьківському компоненті для уникнення непотрібних запитів до сервера на кожному рівні вкладеності.

Відповісти

Підтримати

Svitlana Herashchenko 26.10.2023 10:39

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

Відповісти

Підтримати

Богдан Насушный