Home

Установка

yarn add @kokateam/router-vkminiapps

Для работы роутера требуются зависимости:

yarn add react react-dom @vkontakte/vkui @vkontakte/vk-bridge

Инициализация

Наш роутер основан на инструменте для управления состоянием - recoil. Для инициализации роутера требуется обернуть все приложение в компонент RouterRoot:

  render(
    <RouterRoot>
      <AdaptivityProvider>
        <App />
      </AdaptivityProvider>
    </RouterRoot>,
    document.getElementById("root")
  );

❗❗Если ваше приложение тоже основано на recoil, то оборачивать приложение в RecoilRoot дополнительно не нужно, это уже сделано с нашей стороны.

Структура

Каждое VKUI-приложение – это набор экранов. Для составления структуры нашего сервиса, нужно использовать компоненты нашего роутера: View, Panel:

<Root>
  <View id="main">
    <Panel id="general">
      {/* general */}
    </Panel>
    <Panel id="education">
      {/* education */}
    </Panel>
  </View>

  <View id="users-search">
    <Panel id="users-search">
      {/* modal window for users search */}
    </Panel>
  </View>

  <View id="check-user-actions">
    <Panel id="check-user-actions">
      {/* modal window for check user actions */}
    </Panel>
  </View>
</Root>

Эти компоненты принимают все свойства и методы аналогичные в документации VKUI, прокидывать дополнительно activeView, activePanel и прочие свойства для навигации не нужно, это уже сделано с нашей стороны. Импорт компонентов:

import { Epic, View, Panel } from "@kokateam/router-vkminiapps";