When I try to add the NavLink markup into a Razor component in the Razor Class Library I obtain the next error:
Found markup element with unexpected name 'NavLink'. If this is intended to be a component, add a @using directive for its namespace.
The NavLink I wrote in razor component is:
<NavLink class="nav-link" href="@item.Name" Match="NavLinkMatch.All">
<span class="oi @item.Name" aria-hidden="true"></span> @item.Name
</NavLink>
And the App.razor file is like this:
@using System.Reflection
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.WebAssembly.Services
@using Microsoft.Extensions.Logging
@inject LazyAssemblyLoader AssemblyLoader
@inject ILogger<App> Logger
@inject HttpClient Http
<ErrorBoundary>
<ChildContent>
<Router AppAssembly="@typeof(App).Assembly"
AdditionalAssemblies="@LazyLoadedAssemblies"
OnNavigateAsync="@OnNavigateAsync">
<Found Context="routeData">
<RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
<FocusOnNavigate RouteData="@routeData" Selector="h1" />
</Found>
<NotFound>
<PageTitle>Not found</PageTitle>
<LayoutView Layout="@typeof(MainLayout)">
<p role="alert">Sorry, there's nothing at this address.</p>
</LayoutView>
</NotFound>
</Router>
</ChildContent>
<ErrorContent Context="errorException">
<div class="blazor-error-boundary">
@{ OnError(@errorException); } @*calls custom handler*@
@if (Utilities.IsDebug)
{
<p>@errorException.ToString()</p> @*prints exeption on page*@
}
else
{
<p>@(errorException.Message.AsNullIfEmpty() ?? errorException.GetType().FullName)</p> @*prints exeption on page*@
}
</div>>
</ErrorContent>
</ErrorBoundary>
@code {
private List<Assembly> LazyLoadedAssemblies = new List<Assembly>();
private async Task OnNavigateAsync(NavigationContext args)
{
try
{
if (args.Path == "" || args.Path == "menu1" || args.Path == "menu2")
{
IEnumerable<Assembly> assemblies = await AssemblyLoader.LoadAssembliesAsync(new[] { "MyProject.Test.dll" });
LazyLoadedAssemblies.AddRange(assemblies);
}
}
catch (Exception ex)
{
Logger.LogError("Error: {Message}", ex.Message);
}
}
protected override void OnInitialized()
{
// UIEngine.Initialize();
ComponentsService.Initialize(Http);
base.OnInitialized();
}
public void OnError(Exception exception)
{
}
}
I solved adding the next line at top of the page:
@using Microsoft.AspNetCore.Components.Routing;
Sorry for the confusion.