Routing in Blazor

  • In an application, it is required that users will navigate between different screens for that you need to define routing rules in an application. The routing rule helps us to define which component will appear on the screen according to the URL in which the user is located. This routing rule in Blazor is configured using the @page directive.
  • In the component, we will define page directive at the top like as shown below,
  • If the user is specifying any route which is not defined in any of the components then you will end up by getting the following message,
Routing in Blazor
  • This message what you are getting is through the App.razor file was this message is defined you can replace this with Custom Not Found page.
<Router AppAssembly=”@typeof(Program).Assembly”><Found Context=”routeData”><AuthorizeRouteView RouteData=”@routeData” DefaultLayout=”@typeof(MainLayout)” /></Found><NotFound><CascadingAuthenticationState><LayoutView Layout=”@typeof(MainLayout)”><p>Sorry, there’s nothing at this address.</p></LayoutView></CascadingAuthenticationState></NotFound></Router>
  • Till now we have seen that with the navigation menu and page directive we can navigate between different pages but sometimes you want to do navigation in code itself for that we can use navigation manager service.
@page “/”@inject NavigationManager navigationManager<div><button type=”button” @onclick=”NavToMainPage”>Navigate To Product Component</button></div>@code {private void NavToMainPage(){navigationManager.NavigateTo(“product”);}}
  • Parameters in a Blazor not only come from parent component but also through browser parameters which come through browsers are called route parameters,
@page “/Product/{id:int}”<h3>Parameter is — @id</h3>@code {[Parameter] public int id { get; set; }}
  • NavLink component is used to make navigation link active it will add the active class to the selected navigation menu with the NavLink component we are passing Match parameter as NavLinkMatch.All or NavLinkMatch.The prefix was NavLinkMatch.All are active when href matches completely and NavLinkMatch.Prefix it will check current route values and also we should use navlink only in case of navigation menu items.

--

--

--

Technical Speaker | Computer Engineer | Full Stack Web Developer | ML Enthusiast | * Knowledge Shared = Knowledge² *

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Vue JS — Props Validator

Elm-Lang syntax and basic concepts

WebAssembly -Part II.b | Golang with WASM

Creating and managing landing pages with React and GrapesJS

Building NodeJs API without ExpressJs or any other framework

Introduction of React JS

What Are Closures And Why Should I Use Them?

Azure — How To Configure fallback routes for React Static Web Apps

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Vaibhav Bhapkar

Vaibhav Bhapkar

Technical Speaker | Computer Engineer | Full Stack Web Developer | ML Enthusiast | * Knowledge Shared = Knowledge² *

More from Medium

How to Build Windows Desktop Barcode and QR Code Scanner in .NET 6

Using Exception.Data property to log user-defined information about exceptions

Simple GitHub actions reusable workflow using .NET 6

Help! My swagger controllers all return a 404 in .NET 6