24th Feb 2022

Routing in Blazor

.NET

Written By, Jalpesh Nakum

Overview

Hello Techies! We all are aware of Routing and as you know Routing plays a wide role in any website so in this blog we are going to discuss how we use routing in blazor, so let’s start.

What is Routing?

In simple language, Routing is a URL Pattern, by using this pattern matching process server can understand which type of data we have to pass by using this request.

What is Router in Blazor?

  • In Blazor we have App.Razor component inside this we have component. When we create any component and we want to call this page at that time we need to pass RouteParam (ex: @page “/index” if I want to render this page we need to pass index in our routeparam)
  • if routeparam is found then, as above you set this param as RouteData and Set DefaultLayout else pass NotFound Error message with our given layout
  • We can modify our DefaultLayout and Error Message easily by changing in App.Razor component
  • So, as the above Router plays a big role in any blazor application

Types of Routing

  1. Default Routing
    Example :

    • As we know that when we create any component in our blazor application and if we want to render this particular component then we must specify the routeparam.
    • As mentioned how we can declare routeparam inside @page directive, this is the default routing method which is followed in the blazor application.
  2. Multiple Routing
    • In blazor multiple routing is very simple and similar to default routing, so as above in default we are passing our routeparam @page directive same inside multiple routing as below,
    • Example
    • So, we easily understand that if we want to navigate the same components with the different routeparam, then we need to multiple @page directives as above “/index” and “/” both are rendered the same component.
  3. Route parameters
    • We can use Route Parameters when we want to Render to any page with particular parameters
    • Code
    • Using the above syntax we can call any component with Route Parameters
    • Example :User Details Component
    • Data will pass through the URL same as below mention image

    Routing

  4. Route constraints
    • We can use Route constraints in our blazor application, as of now we are not able to use all of the route constraints but might support many more route constraints in the future.
    • Example : User Details Component
    • As above mention syntax is the same as Route parameters
    • Constraints supported with invariant culture matching: int, long, float, double, decimal, datetime
    • Constraints supported without invariant culture matching: guid, bool

Conclusion

So, this is all about routing in blazor, I hope through this blog you got a basic idea about how router and their routing methods work in the blazor application. Thank you..

Written By,

.NET Developer at Yudiz Solutions Pvt. Ltd