Построение динамической архитектуры вложенных маршрутов с помощью React и React Router

Question

Я собираюсь начать работу над приложением (каталогом товаров), которое отображает категории (n уровней) и вплоть до представления сведений о продукте. Пользователь может создавать свои собственные категории из внешнего пользовательского интерфейса и сохранять его в качестве определенного пользователем профиля. Это, в свою очередь, будет загружено перед рендерингом моего приложения, и категории будут по существу заканчиваться маршрутами.

Мне также нужно отразить текущий маршрут в компоненте крошки.

У кого-нибудь есть опыт работы с такого рода настройками? Как мне построить мои ссылки? Как убедиться, что я могу правильно отобразить все маршруты, основываясь на иерархии клиентов, полученной из бэкэнда?

Типичным вариантом использования может быть то, что пользователь определяет категорию верхнего уровня с несколькими подкатегориями, прежде чем она заканчивается представлением подробного описания продукта, где-то по-другому:

const routes = [
  category: {
    subcategory: {
      subcategory: {
        product
      }
    }
  }
]

Я должен упомянуть, что у меня есть полный контроль над тем, как должен выглядеть объект, содержащий информацию о маршруте / категории, как это написано с нуля.

Как мне обрабатывать все статические маршруты приложений, такие как home, 404 и т. Д., Которые не должны контролироваться пользователем? Должен ли я указывать их как базовый объект перед слиянием с пользовательскими маршрутами из серверной части или просто кодировать их как обычные маршруты в моем приложении?

Я никогда раньше не создавал такую ​​динамическую архитектуру; отсюда этот вопрос.

Вот упрощенный набросок того, как я думаю, это должно выглядеть.

Answer 1

Я думаю, что вы ищете комбо https://reacttraining.com/react-router/web/example/recursive-paths и https://reacttraining.com/react-router/web/example/no-match (<Switch> использование компонентов на маршрутах верхнего уровня).

Как

    <Route path={`${match.url}/product/:id`} component={ProductPage} />
    {category.subCategories.map(s => (
     <React.Fragment key={s.urlName}>
        <Link to={`${match.url}/${s.urlName}`}>{s.name}</Link>
        <Route path={`${match.url}/${s.urlName}`} component={CategoryPage} />
     </React.Fragment>
    ))}

А сверху

    <Switch>
      <Route path="/" exact component={Home} />
      <Route path="/profile" component={WillMatch} />
      <Route path="/main-category-number-one-if-you-want-or-map-it-list-from-backend" component={CategoryPage} />
      <Route component={NoMatch} />
    </Switch>

Конечно, вы должны создать urlName подкатегории самостоятельно. Например, сделать его коротким или иметь черный список имен (например, подкатегория с именем product, которая нарушит логику вашего приложения)

О хлебных крошках - вы можете получить их, разбирая match.url и размещая сверху CategoryPage (тот, в URL которого есть только 1 категория)