Can a razor/Blazor navigation link to either?

Question

I think I've run into another mistaken idea, but I want to double check to see if I am wrong. I had hoped that I could navigate to either a razor page (.cshtml) or a Blazor page (.razor) from the same _Layout.cshtml. Here's a code snippet illustrating what I thought I could do:

<li class="nav-item">
   <a class="nav-link active" aria-current="page" href="/UserMaintenance">
       User Maintenance
   </a>
</li>
<li class="nav-item">
   <a class="nav-link active" aria-current="page" href="/TimeTrackInputTime">
      Input Time for User
   </a>
</li>

All of the links in my _Layout.cshtml are to razor pages, like the User Maintenance link above. However, Input Time for User is a Blazor page. When I tried going to that I got an HTTP 404 error. And even putting /TimeTrackInputTime.razor didn't help.

So, is it the case that if, as I have here a navigation using razor, it will not go to a Blazor component page?

Answer 1

if you are using Blazor components hosted by Razor, you don't navigate to a Blazor page, you navigate to a Razor page that hosts the Blazor component. There are no standalone Blazor pages with Blazor component support.

if you are hosting a Blazor app on a razor site, then razor redirects to the blazor index hosting page. to route to a particular page in the Blazor app you would need to pass the desired page as query string value, that the Blazor app turned into a page navigation.

Answer 2

Hi Falanga, Rod, DOH,

By reading your previous question, it seems your original project is Razor Pages Project and now you want to migrate your current project to Blazor project? Not sure how do you configure your project now, be sure configure the steps below:

To support routable Razor components in Razor Pages apps:

Follow the guidance in the Configuration section.

1. Add an App component to the project root with the following content. App.razor:

      @using Microsoft.AspNetCore.Components.Routing
      <Router AppAssembly="typeof(App).Assembly">
          <Found Context="routeData">
              <RouteView RouteData="routeData" />
          </Found>
          <NotFound>
              <PageTitle>Not found</PageTitle>
              <p role="alert">Sorry, there's nothing at this address.</p>
          </NotFound>
      </Router>
   

2. Add a _Host page to the project with the following content. Replace the {APP NAMESPACE} placeholder with the app's namespace. Pages/_Host.cshtml:

      @page
      @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
      <component type="typeof(App)" render-mode="ServerPrerendered" />
   

Reference :Use routable components in a Razor Pages app

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best regards,
Rena