quick-start.md

Быстрый старт

1. Оборачиваем приложение в компонент Router (важно это делать над Structure):

<Router>
  <App />
</Router>

2. Если хотим автогенерацию структуры, то оборачиваем всю навигацию в компонент Structure:

<Structure>
  <Root>
    ...
  </Root>
</Structure>

3. Все Root, Epic и View из VKUI заменяем на аналогичные компоненты из роутера:

// Верно:
import { Root, Epic, View } from '@cteamdev/router';

// Не верно:
import { Root, Epic, View } from '@vkontakte/vkui';

4. Инициализируем роутер (важно делать это как можно раньше - до первого рендера в главном файле):

import { render } from 'react-dom';
import { init } from '@cteamdev/router';

import { App } from './App';

init(options?: Options, structure?: RootStructure);
render(<App />, document.getElementById('root'));

options

Необязательно. Настройки роутера.

Ключ	По умолчанию	Описание
mode	Mode.HASH	Место хранения текущей локации в адресной строке. Принимает значения enum'а Mode.
style	Style.AUTO	Стиль навигации. Принимает значения enum'а Style.
defaultRoute	/	Страница по умолчанию. Не рекомендуется использовать при автоопределении структуры или не пустом экране на странице /.
shouldClose	true, если доступен vk-bridge	Нужно ли закрывать приложение при нажатии кнопки Назад и отсутствии элементов в истории.
debug	false	Режим отладки (вывод событий в консоль).

structure

Необязательно. Структура навигации, если не указана - генерируется автоматически.

Основные функции навигации

Функция	Параметры	Описание
push(path: string, meta?: Meta)	- path - путь к странице. - meta - метаданные, которые нужно передать.	Перейти к следующей странице.
replace(path: string, meta?: Meta)	- path - путь к странице. - meta - метаданные, которые нужно передать.	Заменить текущую страницу на переданную.
back()	-	Вернуться к предыдущей странице.
go(delta: number)	- delta - количество шагов.	Перейти на delta шагов вперёд/назад.