Navigation Not Working When Placed In MainLayout.razor RRS feed

  • Question

  • User-1097147222 posted

    I'm converting a bootstrap 4.4.1 template to a blazor/razor SPA app. I created a new menu to display at the top of the application. When I place the html for the menu in the _Host.cshtml component, the menu and page work as expected. However, if I move the menu code into MainLayout.razor, the menu displays correctly but none of the links respond when clicked on. The menu code is provided below.

    Any assistance would be greatly appreciated.

    <header id="header">
    <div class="container-fluid">

    <div id="logo" class="pull-left">
    <a href="#intro"><img src="assets/img/logo.png" alt=""></a>

    <nav id="nav-menu-container">
    <ul class="nav-menu">
    <li class="menu-active"><a href="#intro">Home</a></li>
    <li><a href="#about">About Us</a></li>
    <li><a href="#services">Services</a></li>
    <li><a href="#portfolio">Portfolio</a></li>
    <li><a href="#team">Team</a></li>
    <li class="menu-has-children">
    <a href="">Drop Down</a>
    <li><a href="fetchdata">Drop Down 1</a></li>
    <li><a href="#">Drop Down 3</a></li>
    <li><a href="#">Drop Down 4</a></li>
    <li><a href="#">Drop Down 5</a></li>
    <li><a href="#contact">Contact</a></li>

    Saturday, April 11, 2020 11:00 AM

All replies

  • User415553908 posted

    It appears you use hash routing to jump around the page, which appears to be not supported by Blazor just yet. The github issue also provides a few suggestions to work around the issue, one being to use Blazor Anchor Navigation Tool.

    If you instead intended to use normal Blazor component routing model, replacing <a href="#portfolio"> with <NavLink href="portfolio"> is likely the way to achieve that.

    Friday, April 17, 2020 11:02 AM
  • User-1097147222 posted

    Thank you very much for taking the time to review and respond to my issue. Yes, I am using hash routing. I'm going to read over the work around suggestion tonight.

    Thank you again.  Be safe.

    Saturday, April 18, 2020 6:53 AM