createBrowserRouter

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

При использовании этого роутера в приложении внешние ссылки на экраны приложения не должны содержать символ #, например:

https://my-server.com/persik-screen

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

Пример

TypeScript

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

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

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

Объявление

TypeScript

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

Параметры

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

Результат

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

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

При указании маршрутов не используйте символ # в URL.