fix: [FluentNavLink] An issue where empty strings were not allowed in Href

[dannyldj]

Pull Request

📖 Description

Fixed FluentNavLink not working correctly when Href was empty

👩‍💻 Reviewer Notes

So simple PR

📑 Test Plan

Verify that clicking on a FluentNavLink correctly navigates to the root page when the Href of the FluentNavLink is empty.

✅ Checklist

General

• I have added tests for my changes.
• I have tested my changes.
• I have updated the project documentation to reflect my changes.
• I have read the CONTRIBUTING documentation and followed the standards for this project.

Component-specific

• I have added a new component
• I have added Unit Tests for my new component
• I have modified an existing component
• I have validated the Unit Tests for an existing component

Not wanted behavior

[vnbaaij]

There is a reason we do not want to have empty Hrefs. This is done on purpose so you can have entries in the FluentNavMenu that don't necessarily go somewhere but do invoke an action. Like in the https://www.fluentui-blazor.net/NavMenu#navigation-examples:

<FluentNavLink OnClick="OnClick" Icon="@(new Icons.Regular.Size20.LeafOne())">Item 3.1</FluentNavLink>

If you still need to have a link that goes to the homepage, you can use asa value either "/" or "./". The latter can be used in case of using a proxy and using PathBase

See also #1654

[dannyldj]

The original NavLink component accepts an empty string, and the link below recommends an empty string as a way to navigate to the root page.
https://learn.microsoft.com/ko-kr/aspnet/core/blazor/fundamentals/routing?view=aspnetcore-8.0#navlink-component

Example

<div class="nav-scrollable" 
    onclick="document.querySelector('.navbar-toggler').click()">
    <nav class="flex-column">
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
                <span class="bi bi-house-door-fill-nav-menu" 
                    aria-hidden="true"></span> Home
            </NavLink>
        </div>

+       @foreach (var name in GetRoutableComponents())
+       {
+           <div class="nav-item px-3">
+               <NavLink class="nav-link" 
+                       href="@Regex.Replace(name, @"(\B[A-Z]|\d+)", "-$1").ToLower()">
+                   @Regex.Replace(name, @"(\B[A-Z]|\d+)", " $1")
+               </NavLink>
+           </div>
+       }

    </nav>
</div>

[dannyldj]

Since that property is nullable, it will work as intended, as long as you don't make the mistake of declaring the Href to be an empty string and throwing in an OnClick callback.

[vnbaaij]

Tested on the NavMenuDefault example and it indeed works as expected. Merging it in. Thanks!