RouterLink inside a navbar in a dropdown menu doesn't work (Angular and Springboot)

Question

i must develop a web App using spring boot and angular. In this app there is a tab which contains various data (connect with mongoDB).i created a component for add new data in this tab. The problem is when i try to press a link in a dropdown menu inside the navbar doesn't redirect me in the correct page but show me whitelabel page

i tried to use routerLink and href, delete the dropdown and using a button in a navbar. i added the navar first in my index.html, then i tried inside app.component.

my index.html

 /* When the user clicks on the button, 
          toggle between hiding and showing the dropdown content */
          function myFunction() {
            document.getElementById("myDropdown").classList.toggle("show");
          }
          
          // Close the dropdown if the user clicks outside of it
          window.onclick = function(e) {
            if (!e.target.matches('.dropbtn')) {
            var myDropdown = document.getElementById("myDropdown");
              if (myDropdown.classList.contains('show')) {
                myDropdown.classList.remove('show');
              }
            }
          }

       <header>
          <div id="riga-top"></div>
          <nav id="navbar">
            <div id="area-logo-universita">
              <img src="assets/img/logo-unicam.jpg">
            </div>
            <div id="area-logo-servizio">
              <img src="">
            </div>
            <ul>
              <li class="active collapse">
                <a href="/contatto">HOME</a>
              </li>
              <li class="dropdown collapse">
                <button class="dropbtn" onclick="myFunction()">Aziende
                  <span class="caret"></span>
                </button>
                <div class="dropdown-menu dropdown-content" id="myDropdown">
                  <a href="/azienda" class="ainside">Aggiungi Azienda</a>
                </div>
              </li>
                      
          </nav>
        </header>
        <!-- Left side column. contains the logo and sidebar -->
        <div class="content-wrapper" style="background-color: rgb(236, 240, 245) !important; background-image: url(&quot;/Content/images/bg-home.jpg&quot;) !important; background-repeat: no-repeat !important; min-height: 710px;">
          <div class="container">
            <!-- Main content -->
            <section class="content">
              <app-root></app-root>
            </section><!-- /.content -->
          </div>
        </div>
        <footer>
        </footer>

Aniket Kamthe Aniket Kamthe · Accepted Answer · 2019-03-26T10:15:16

You have to implement Router Link like below and should not use href, you can find complete documentation here.

Replace following

<li class="active collapse">
    <a href="/contatto">HOME</a>
</li>

By this

<li class="active collapse">
    <a [routerLink]="['/contatto']">
      HOME
    </a>
 </li>

RouterLink inside a navbar in a dropdown menu doesn't work (Angular and Springboot)

1 Answers