1. Быстрый старт

Установка

Для установки роутера воспользуемся Yarn (можно использовать NPM):

$ yarn add @itznevikat/router

Также нужно установить peer-зависимости, если их ещё нет в проекте:

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

Структура

Главным элементом роутера является компонент Match. В него нужно обернуть структуру приложения, например:

<Match>
  <Root nav="/">
    <View nav="/">
      <Panel nav="/">
        <PanelHeader>Главная</PanelHeader>
      </Panel>
      <Panel nav="/persik">
        <PanelHeader>Персик</PanelHeader>
      </Panel>
    </View>
    <View nav="/info">
      <Panel nav="/">
        <PanelHeader>О приложении</PanelHeader>
      </Panel>
    </View>
  </Root>
</Match>

Однако есть примечания. Все слои навигации, кроме панелей, должны быть в одном компоненте. Примеры, как приложение работать не будет:

<Match>
  <Navigation nav="/" />
</Match>

<Match>
  <Root nav="/">
    <HomeView nav="/" />
    <InfoView nav="/info" />
  </Root>
</Match>

А так приложение будет работать корректно:

<Match>
  <Root nav="/">
    <View nav="/">
      <Home nav="/" />
      <Persik nav="/persik" />
    </View>
    <View nav="/info">
      <Info nav="/" />
    </View>
  </Root>
</Match>

Стоит обратить внимание, что при вынесении панелей в отдельные компоненты, свойство nav или id нужно передавать как самому компоненту, так и панели. Все компоненты навигации, кроме панелей (View, Root, Epic, ModalRoot) должны быть импортированы из роутера:

import { View, Root, Epic, ModalRoot } from '@itznevikat/router';

Настройки

Для настройки роутера нужно использовать пропсы у компонента Match. Сейчас доступны следующие настройки:

Проп	По умолчанию	Описание
style	Автоматически	Стиль навигации. По умолчанию определяется автоматически (хуки useStyle и useVKPlatform)
initialURL	Не указана	Начальная страница. Если не указана, то при запуске не будет совершён переход
fallbackURL	Не указана	Страница 404. Будет использована, если страница при переходе не найдена
disableSetLocation	false	Отключает отправку события VKWebAppSetLocation для установки хэша вне фрейма. По умолчанию выключено, событие отправляется

Навигация

Как можно заметить, для указания путей к страницам используется свойство nav или id. В данном кусочке кода приложение будет доступно по путям:

• Главная - https://locahost:10888/#/
• Персик - https://locahost:10888/#/persik
• О приложении - https://locahost:10888/#/info

Для корректной работы в VKMA происходит навигация по хэшу.