Блог

Я использую UIKit css framework с Gatsby.js

Когда я использую OffCanvas (Nav) для перехода на другую страницу, следующая страница перезагружается, но она застревает. ничего не происходит, даже прокрутки.

Это мой файл SideBar.jsx

Я разместил частично построенный веб-сайт.Вы можете проверить проблему. Перейдите к
https://jainsons.netlify.app/aboutus затем откройте боковую панель и нажмите кнопку «Домой».

 import React from 'react'
import {Link} from 'gatsby'
import logo from "../images/logo.png"
import UIkit from 'uikit/dist/js/uikit.min.js'  
import Icons from 'uikit/dist/js/uikit-icons.js'
function SideBar() {
    UIkit.use(Icons)
    return (
        <React.Fragment>
        <div className="uk-position-absolute">
            <button 
                className="uk-button uk-button-small uk-button-secondary uk-margin-small-left " style={{marginTop:"27px"}} type="button" uk-toggle="target: #offcanvas-nav-primary">
                <span className="" uk-icon="icon:menu;ratio:2"></span>
            </button>
        </div>
        <div id="offcanvas-nav-primary" uk-offcanvas="mode:reveal;overlay: true">
            <div className="uk-offcanvas-bar uk-flex uk-flex-column">
                <ul className="uk-nav uk-nav-primary uk-nav-center uk-margin-auto-vertical">
                    <li className=" uk-margin-xlarge-bottom">
                        <Link to="/" >
                            <img src={logo} alt="LOGO"/>
                        </Link>
                    </li>
                    <li>
                        <Link to="/" className="uk-text-lead" activeClassName="uk-active" >
                            Home
                        </Link>
                    </li>
                    <li className="uk-nav-divider"></li>
                    <li className="uk-parent">
                        <p className="uk-text-lead">Brands</p>
                        <ul className="uk-nav-sub">
                            <li><p>RAPCA</p></li>
                            <li><p>POLYX</p></li>
                        </ul>
                    </li>
                    <li className="uk-nav-divider"></li>
                    <li>
                        <Link to="/about" className="uk-text-lead" activeClassName="uk-active" >
                            Home
                        </Link>
                    </li>
                </ul>

            </div>
        </div>
        </React.Fragment>
    )
}

export default SideBar
  

Я не думаю, что это обязательно будет связано с Gatsby Link. Может быть, попробуйте переключиться <Link to="/"> на обычный <a href="/"> тег, чтобы увидеть, такое же ли поведение. Просматривая инструменты разработчика в Chrome, я вижу, что прослушиватель событий для значка меню click исчезает после нажатия ссылки из навигации.