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?
<Router AppAssembly="@typeof(Program).Assembly" PreferExactMatches="@true">
<Found Context="routeData">
<RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
</Found>
<NotFound>
<LayoutView Layout="@typeof(MainLayout)">
<p>Sorry, there's nothing at this address.</p>
</LayoutView>
</NotFound>
</Router>
- 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
- Default Routing
Example :@page "/" <h1>Hello, world!</h1> Welcome to your new app.
- 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.
- 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
@page "/" @page “/index” <h1>Hello, world!</h1> Welcome to your new app.
- 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.
- Route parameters
- We can use Route Parameters when we want to Render to any page with particular parameters
- Code
NavManager.NavigateTo($"/user-details/{Id}"); - Using the above syntax we can call any component with Route Parameters
- Example :User Details Component
@page "/user-details/{Id}" @code { [Parameter] public string Id { get; set; } } - Data will pass through the URL same as below mention image
- 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
@page "/user-details/{Id:int}" @code { [Parameter] public int Id { get; set; } } - 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..
You may also like
Unlocking the Power of .NET Core Development: Cutting-Edge Strategies and Tools
As the software development industry adapts, Core has become...
How can you use ML Sentiment Analysis in ASP.NET Core?
We are going to talk about ML Sentiment Analysis which is able to conveniently explore the aspects o...
How to work Loop Execution with Benchmark using .NET
What is Benchmarking? It is used for measuring timing complexity for various algorithms and part of ...
