createHashRouter

Используйте эту функцию, чтобы создать Hash-роутер в своём React-приложении.

Hash-роутер предназначен для игр и мини-приложений, которые запускаются на платформе ВКонтакте: в мобильном приложении ВКонтакте или из десктопной или мобильной версии сайта. При использовании этого роутера внешние ссылки на экраны приложения должны содержать символ #, например:

https://vk.com/app12345/#/persik-screen

В качестве параметра функция принимает массив, элементы которого описывают маршруты — какой экран или окно будут открыты при переходе в приложении по тому или иному URL.

Пример

TypeScript

import { RouterProvider, createHashRouter } from '@vkontakte/vk-mini-apps-router';

// Вызов функции 
const router = createHashRouter([
  {
    path: '/',
    panel: 'home_panel',
    view: 'default_view',
  },
  {
    path: '/contacts',
    panel: 'contacts_panel',
    view: 'contacts_view',
  }
]);

// Передача созданного роутера в компонент
<RouterProvider router={router}>
    <App />
</RouterProvider>

Обратите внимание, что в поле path символ # не указывается.

Другие примеры

Примеры использования функции можно также найти в разделах Установка и подключение и Настройка маршрутов.

Объявление

TypeScript

export function createHashRouter(routes: RouteWithRoot[] | RouteWithoutRoot[]): RemixRouter

Параметры

Параметр	Тип	Описание
`routes` обязательный	`RouteWithRoot[]` или `RouteWithoutRoot[]`	Массив объектов, описывающих маршруты. Если в приложении несколько компонентов `Root` и используется [`Epic`](https://vkui.io/components/epic, массив должен состоять из объектов `RouteWithRoot`. В ином случае элементы массива — объекты `RouteWithoutRoot`.

Результат

Объект RemixRouter. Определён в библиотеке @remix-run/react-router.

Особенности использования

При создании маршрутов не используйте символ # в URL, в нём нет необходимости.