@blumjs/router v7.11.0

Описание

Библиотека основана на effector и window.history.state без изменения url и hash. Создана для роутинга vk-mini-apps, также поддерживает PWA. Рекомендуется использовать с @blumjs/cli.

Использование

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

Чтобы обработать браузерную кнопку назад, нужно проинициализровать роутер:

import { useInitRouter } from '@blumjs/router';

const App = () => {
  useInitRouter({
    view: "Main",
    panel: "Home",
    modal: null,
    popout: null
  });

  ...
}

Чтобы поймать кнопку назад, используйте middlewares:

import {
  useInitRouter,
  createCatchBackBrowserRouteMiddleware,
  createDisableBackBrowserRouteMiddleware,
  createRouteMiddleware,
  blumRouter
} from '@blumjs/router';

const App = () => {
  useInitRouter({
      view: "Main",
      panel: "Home",
      modal: null,
      popout: null
    },
    //первый аргумент - название роута; второй callback, который вызовется при срабатывании браузерной кнопки назад
    createCatchBackBrowserRouteMiddleware('Alert', (storeRoutes, prevRoutes) => back());

    //такая же как createCatchBackBrowserRouteMiddleware, но автоматически предотвращает изменение роутеров
    createDisableBackBrowserRouteMiddleware('Loading', (storeRoutes, prevRoutes) => console.log('loading, please wait...')),

    //кастомный middleware
    createRouteMiddleware((storeRoutes, prevRoutes) => {
      if(navigator.onLine){

        //middleware пройден
        return true;
      }
      blumRouter.historyPush({view: 'ConnectionError', panel: 'Offline', modal: null, popout: null});
      return false;
    })
  );

  ...
}

Routes: get

Чтобы получить роутеры и проверить инициализацию:

import { useRouter } from '@blumjs/router';

const App = () => {
  const { activeView, activePanel, activeModal, activePopout, isRouteInit } = useRouter();

  ...
}

Routes: set

Чтобы поставить роутер, используйте функции: setActiveView, setActivePanel, setActiveModal, setActivePopout.

import { setActiveViewPanel, setActivePanel, setActiveModal, setActivePopout } from '@blumjs/router';

setActiveViewPanel({view: 'Main', panel: 'Home'});
setActivePanel('Home');
setActiveModal('Notifications');
setActivePopout('Loading');

Чтобы вернуться на предыдущую страницу:

import { back } from '@blumjs/router';

//если вы хотите, чтобы роутеры менялись до прогонки middlewares:
back({
  isDispatchChangeStateEventBeforeMiddleware: true,
  isDispatchChangeStateEventAfterMiddleware: false
});

//back - асинхронная функция и ее нельзя дождаться с помощью await и then. Используйте опции beforeBackHandledCallback (срабатывает после window.history.back и перед middlewares) и afterBackHandledCallback (срабатывает при успешном или провальном обходе middlewares)
back({
  beforeBackHandledCallback: (storeRoutes, prevRoutes) => {
    console.log("I triggered before middlewares")
  },
  afterBackHandledCallback: (storeRoutes, prevRoutes) => {
    console.log("I triggered after middlewares")
  }
});

//значения по умолчанию: isDispatchChangeStateEventBeforeMiddleware = false, isDispatchChangeStateEventAfterMiddleware = true, и callbacks = null
back();

Если вам нужно выключить модалку или popout на новой странице (например, offline страница, где пользователь не должен видеть модалку и popout) вы можете использовать _setActiveModal, _setActivePopout. В других случаях лучше использовать функцию back.

import { _setActiveModal, _setActivePopout } from '@blumjs/router';

_setActiveModal(null);
_setActivePopout(null);