下拉菜单中导航栏中的RouterLink不起作用（Angular和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> 

Answer 1

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>