4. Хуки

Получение параметров

useParams
Работает только в компонентах, которые находятся внутри Match.
Получает параметры из URL (всё, что находится после ?, в случае с данным роутером - после ?, находящегося за # - http://localhost:9000/#/?param=value). Подробнее

Получение метаданных

useMeta
Работает только в компонентах, которые находятся внутри Match.
Получает метаданные, переданные через методы push и replace. Подробнее

Получение текущей локации

useLocation
Работает в любых компонентах.
Получает текущую локацию (протокол, адрес, путь, параметры и т. д.). В отличие от стандартного window.location, путь и параметры отдаёт те, которые используются роутером (то есть после #); хэш в данном случае будет находиться после #, которая находится после # - http://localhost:9000/#/#myhash.

const App: FC<NavIdProps> = ({ nav }) => {
  // Использовать другие хуки (например, useDeserialized) тут нельзя, так как App не находится внутри Match
  const { pathname } = useLocation();

  return (
    <Match>
      {pathname === '/my/secret/page' && <Secret />}

      {/* ... */}
    </Match>
  );
};

Получение начальной локации

useInitialLocation
Работает в любых компонентах.
Получает локацию, которая была перед запуском роутера (т. к. роутер стирает всё, например, при установленном initialURL). В отличие от хука useLocation, возвращаемая локация будет такая же, как и window.location.

const App: FC<NavIdProps> = ({ nav }) => {
  const { hash } = useInitialLocation();

  useEffect(() => {
    if (hash === '#mysecretpage') {
      replace('/my/secret/page');
    }
  }, []);

  return (
    <Match initialURL="/">
      {/* ... */}
    </Match>
  );
};

Получение активных свойств слоёв навигации

useDeserialized
Работает только в компонентах, которые находятся внутри Match.
Получает активные view, panel и все остальные слои, но уже по nodeID.

const MyNavigation: FC<NavIdProps> = ({ children }) => {
  const { view } = useDeserialized();

  return (
    <Epic
      tabbar={
        <Tabbar>
          <TabbarItem
            onClick={() => push('/feed')}
            selected={view === 'feed'}
            text="Новости"
          >
            <Icon28NewsfeedOutline />
          </TabbarItem>
          <TabbarItem
            onClick={() => push('/services')}
            selected={view === 'services'}
            text="Сервисы"
          >
            <Icon28ServicesOutline />
          </TabbarItem>
        </Tabbar>
      }
    >
      {/* ... */}
    </Epic>
  );
};

Удобная работа с рефами при использовании ActionSheet

useActionRef
Работает в любых компонентах.
В самом ActionSheet получаем actionRef и прокидываем:

export const TestActionSheet: FC<NavIdProps> = () => {
  const { actionRef } = useActionRef();

  return (
    <ActionSheet
      onClose={back}
      iosCloseItem={
        <ActionSheetItem autoclose mode="cancel">
          Отменить
        </ActionSheetItem>
      }
      toggleRef={actionRef}
    >
      <ActionSheetItem autoclose>Первое действие</ActionSheetItem>
      <ActionSheetItem autoclose>Второе действие</ActionSheetItem>
      <ActionSheetItem autoclose mode="destructive">
        Опасное действие
      </ActionSheetItem>
    </ActionSheet>
  );
};

В компоненте, когда хотим перейти к ActionSheet, прокидываем функцию для перехода аргументом в хук, а для самого перехода вызываем setActionRef с рефом в аргументе или используем обработчик setActionRefHandler (например, для события onClick при нажатии на кнопку):

export const Persik: FC<NavIdProps> = ({ nav }) => {
  const { setActionRefHandler } = useActionRef(() =>
    push('/?popout=test-action-sheet')
  );

  return (
    <Panel nav={nav}>
      <Group>
        <SimpleCell
          before={<Icon28ArticleOutline />}
          onClick={setActionRefHandler}
        >
          Показать действия
        </SimpleCell>
      </Group>
    </Panel>
  );
};