Blazor Routing Ultimate Tutorial

To allow the user to navigate between different components we need to configure routing rules in our application. These routing rules will help to determine which component will be displayed on the UI according to the URL which the user has specified. Blazor server supports a nice way to route a request to different pages within a single page application. It can look intimidating at the beginning especially if you don’t know how everything hangs together.

For the server-side, it uses ASP.Net Core Endpoint Routing. Blazor provides us with 2 methods:

1. MapBlazorHub()
2. MapFallbackToPage()

            app.UseEndPoints(endpoints =>
            {
                        endpoints.MapBlazorHub();
                        endpoints.MapFallbackToPage(“/_Host”);
            });

MapBlazorHub()

MapBlazorHub means that our Blazor application is welcoming the incoming requests.

MapFallbackToPage()

MapFallbackToPage means for any valid and invalid addresses it should go to this host file. The host file can have a .cshtml extension which means you can have MVC (Model View Controller) files in your Blazor application. The host file is like the master page of our Blazor application because we load some styling as well as some javascript on that page.

Page Directives

The Routing Rules are configured using the app page directive. It works in a quite similar way to the root attribute in the ASP.Net core application. An important thing to be noticed is that a route has to start with a “/” (as written below) else it will get an error. We can also have several page directives in a single component (for example: in the code snippet below the index page and the extra page have been added).

Seeing the snippet below, we can notice that Blazor will create a base route which one can think of as a request entry point, and then pass the request through to the appropriate page that needs to handle it. If there isn’t a page to the route request, then the user will get a 404 page not found error via the App.razor file

            @page”/”
            @page”/index”
            @page”/extra”

<h1>Hello, World!</h1>
Welcome to your new app.
<SurveyPrompt Tilte=”How is blazor working for you?” />

App.razor file

The app.razor component has all the routing logic which our Blazor server will use to branch out and create all other routes declared in the page component of our Blazor application. Blazor will do that for us automatically as long as we use its route component in the app.razor file.

Using the Router component the application tries to manipulate the route and see whether it is a valid or an invalid address and based on that it navigates to the particular component, that is, found and not found.

            <Router AppAssembly=”@typeof(Program).Assembly”>
            <Found Context=”routeData”>
                        <RouteView RouteData=”@routeData” DefaultLayout=”@typeof(MainLayout)” />
            </Found>
            <NotFound>
                        <LayoutView Layout=”@typeof(ErrorLayout)”>
                                    <p>Sorry, there’s nothing at this address.</p>
                        </LayoutView>
            </NotFound>
            </Router>

It has 2 parts:

1. Found – The found component alongside the context which is the routeData will be used to create a view which is where all the route data will be used to provide some context to the pages that we are going to access.
2. NotFound – The not found component will be used to provide a way to customize the not found page. In this scenario, we have a layout view and an error layout view.

The AppAssembly allows us to register one assembly to load the information. However, if you have a library that has some routing information in it like the pages that you want to register, that the router component has an extra parameter and that is the AdditionalAssemblies which accepts multiple assemblies.

<Router AppAssembly=”@typeof(Program).Assembly”
AdditionalAssemblies=”@(new [] {typeof(Startup).Assembly })”>

If your Startup was actually in a separate library, then using the above code snippet you can register the pages from that Startup Assembly in the separate library.

<NavLink>

The NavLink component as the link implies is the link to other pages in our application. It supports a parameter called Match and that is the only custom parameter that you can set.

The Match parameter can have 2 values:

1. NavLinkMatch.All
2. NavLinkMatch.Prefix

NavLinkMatch.All

As the name implies this option indicates an active status when its path matches the entire current URL

NavLinkMatch.Prefix

The Prefix on the other hand will be active if just the Prefix of the URL is matched.

This can have many applications in real-life scenarios especially in nested nav links where you can use the combination of the two.

Navigate Manager

Now, to navigate to a particular page by clicking on a button, you will have to inject the Navigation Manager. For example, create a razor file called Test.razor and navigate to this file via the Index component.

            @page”/”
            @page”/index”
            @inject NavigationManager navigateManager

            <h1>Hello World!</h1>
            Welcome to your new app.

            <button class=”btn-btn-primary” @onclick=”Navigate”>Navigate to Test</button>

            @code{
                        Private void Navigate()
                        {
                                    navigateManager.NavigateTo(“Test”);
                        }
            }

Conclusion

Blazor provides rich class routing. Blazor Routing also supports custom parameters. It is similar to a speed donor core parameter routing and follows the same angular bracket approach.  ASP.NET Core Endpoint Routing is used by the Blazor server software. It contains nearly all features, such as route parameters and constraints.

It also includes a built-in component called NavLink, which aids in the development of menu items. It has built-in services that assist us in moving from one component to the next. There are, however, some drawbacks, such as an active connection to the server is required.