DOMException: не удалось выполнить querySelector в документе:

Я работаю над проектом, который начал строить на начальной загрузке 4.3.1.

Я без ума от этого кода Javascript и html.

<a class="dropdown-item" href="{{ route('user.panel') }}">
    User panel
</a>

Я получаю эту ошибку в консоли.

SyntaxError: "http://localhost:8000/user/panel" не является допустимым селектором

bootstrap.min.js: 6 Неперехваченное исключение DOMException: не удалось выполнить 'querySelector' в 'Document': 'http://localhost:8000/user/panel 'не является допустимым селектором. в Object.getSelectorFromElement (http://localhost:8000/themes/js/bootstrap.min.js:6:1466) по адресу http://localhost:8000/themes/js/bootstrap.min.js:6:46766 в Array.map () в ntrefresh (http://localhost:8000/themes/js/bootstrap.min.js:6:46740) при новом n (http://localhost:8000/themes/js/bootstrap.min.js:6:46381)

Я понял, что это происходит из-за раскрывающегося списка, из-за этой ошибки раскрывающийся список не работает. Я также проверил, использую ли я href = "javascript: void (0);", href = "#!" ошибка возникает, но если я использую тег привязки без href или href = "#", то он работает нормально.

Примечание. Мне нужно решение с href = "javascript: void (0); поскольку href =" # в адресной ссылке выглядит некрасиво, и страница прокручивается вверх.

<ul class="navbar-nav">
    @guest
    <li class="navbar-item dropdown">
        <a href="#" class="nav-link" data-toggle="dropdown">Register/Login<i class="fas fa-sort-down"></i></a>
        <div class="dropdown-menu text-right m-2 position-absolute" style="width:300px;left:-111px;">
            <a href="{{ route('login') }}" class="btn btn-primary d-block m-3">Login</a>
            <span class="m-3">Are you new user?<a href="{{ route('register') }}" class="link-sign">Login</a></span>
        </div>
    </li>
    @else
        <li class="nav-item dropdown">
            <a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
                {{ Auth::user()->first_name }}&nbsp;{{ Auth::user()->last_name }} <span class="caret"></span>
            </a>

            <div class="dropdown-menu dropdown-menu-left" aria-labelledby="navbarDropdown">
                <a class="dropdown-item" href="{{ route('user.panel') }}">
                    User Panel
                </a>
                <a class="dropdown-item" href="#" id="logout-button">
                    {{ __('Logout') }}
                </a>
                <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
                    @csrf
                </form>
            </div>
        </li>
    @endguest
</ul>

Ошибка появляется в следующей строке.

$('body').scrollspy({
    target: '#mainNav',
    offset: 50
});

script.js

(function($) {
    "use strict"; // Start of use strict

    // Smooth scrolling using jQuery easing
    $('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function() {
        if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
            if (target.length) {
                $('html, body').animate({
                    scrollTop: (target.offset().top - 54)
                }, 1000, "easeInOutExpo");
                return false;
            }
        }
    });

    // Closes responsive menu when a scroll trigger link is clicked
    $('.js-scroll-trigger').click(function() {
        $('.navbar-collapse').collapse('hide');
    });

    // Activate scrollspy to add active class to navbar items on scroll
    $('body').scrollspy({
        target: '#mainNav',
        offset: 50
    });

})(jQuery); // End of use strict

AOS.init({
    easing: 'ease-in-out-sine'
});

$('#logout-button').on('click', function(e) {
    e.preventDefault();
    $('#logout-form').submit();
});


$('#select').change(function() {
    var $selected = $(this).find(':selected');
    $('#description').html($selected.data('description'));
}).trigger('change');
$("#select").change(function() {
    var color = $(this).val();
    if (color == "laptop_repair") {
        $(".box").not(".laptop_repair").hide();
        $(".laptop_repair").show();
    } else if (color == "install_windows") {
        $(".box").not(".install_windows").hide();
        $(".install_windows").show();
    } else if (color == "backup") {
        $(".box").not(".backup").hide();
        $(".backup").show();
    } else if (color == "antivirus") {
        $(".box").not(".antivirus").hide();
        $(".antivirus").show();
    } else if (color == "magenta") {
        $(".box").not(".magenta").hide();
        $(".magenta").show();
    } else {
        $(".box").hide();
    }
});
getSelectorFromElement: function getSelectorFromElement(element) {
    var selector = element.getAttribute('data-target');

    if (!selector || selector === '#') {
        var hrefAttr = element.getAttribute('href');
        selector = hrefAttr && hrefAttr !== '#' ? hrefAttr.trim() : '';
    }

    return selector && document.querySelector(selector) ? selector : null;
}