Некорректно работает роутер

[ExLineP]

При создании панелей во View и переходе по панелям через push или через смену url страницы происходит наложение двух страниц, но при перезагрузке странице все возвращается в нормальное состояние: показывается только одна нужная страница. Могу предположить, что нужной панели не дается нужный класс активности.

Использую новейшую версию роутера. Код:

function App() {
    const { view: activeView, panel: activePanel } = useActiveVkuiLocation();
    return (
        <Root activeView={activeView}>
            <View nav={"default_view"} activePanel={activePanel}>
                <Panel nav="home_panel">
                    <div>123</div>
                </Panel>
                <Panel nav="chart_panel">
                    <div>CHART</div>
                </Panel>
            </View>
        </Root>
    );
}

[nshvyryaev]

Здравствуйте! Это выглядит как самый базовый способ использования. Пробовали запускать пример приложения, расположенный тут: https://github.com/VKCOM/vk-mini-apps-router/tree/master/examples/vk-mini-apps-router-example?

Если и пример не запускается - дайте знать, в каком окружении запускаете.

Если пример работает - проверьте логику подключения, структуру компонентов, настройку путей, версии библиотек.

Если есть проблема с классами - это не входит в зону ответственности роутера, классы расставляет библиотека VKUI.

[ExLineP]

@nshvyryaev Да, работает, но там используется версия 1.2.0, а не 1.3.1

[nshvyryaev]

попробуй обновить до 1.3.1, пожалуйста. До выпуска 1.3.1 мы прогоняли с ней пример - работало

[ExLineP]

на мвк некорректно отображается активная панель приложения, на вк.ком всё работает нормально, при переходе с помощью вк-роутера на новую панель она просто отображается под предыдущей панелью, то есть на странице сразу две панели, хотя в url указан корректный путь, возможно проблема в классах, потому что на мвк отсутствует в списке панелей класс активной, зато есть предыдущая и следующая, на вк ком только активная панель отображается и переходы отрабатывают корректно - моё заключение

[nshvyryaev]

а какая версия VKUI?

Еще можно попробовать запустить все то же самое без роутера - просто сделать useState для активной панели, чтобы убедиться, что без роутера приложение работает.

[ExLineP]

VKUI 5.10.0

Немного не понял как сделать репродьюс с useState

[pasha-nikitin-2003]

Можете посмотреть примеры на typescript и javascript здесь

[ExLineP]

В примерах React 17 и CRA, который, мягко говоря, устарел.

[ExLineP]

Посмотрите, пожалуйста, как работает в роутер в Vite и 18 реакте, по крайней мере не только у меня появляются проблемы с роутером.

[pasha-nikitin-2003]

В примерах React 17 и CRA, который, мягко говоря, устарел.

Это пример переключения панелей без роутера, средствами только VKUI. Этот пример будет также хорошо работать с любыми сборщиками и 18 React. Такой же пример можно найти в документации VKUI.

Роутер по сути является оберткой над useState из указанных выше примеров, т.е. роутер в зависимости от адреса страницы определяет активную панель. Логика переходов и отображения лежит на VKUI.

VKUI отображает на странице в мобильной версии сайта сразу 2 панели для поддержки анимаций. Возможно существуют и другие причины, лучше узнать об этом у команды VKUI

Если при переходах на mvk возникает визуальный баг или же сборка через vite не запускается, предоставьте, пожалуйста, полное описание проблемы и мы возьмем баг в работу.