Navigation and Routing

Every software consists of a set of pages, each of which is responsible for a certain task in the UI and the functionality of the app. Within this chapter, we are going to understand the routers in the Blazor WebAssembly app, including what they are, how they work, and how to define them so that users can navigate between your app pages. We will also learn how to send data between pages via the URL and query parameters. After that, we will implement a custom UI for when the user navigates to a non-existent URL. Furthermore, we will dive a bit deeper and learn about some advanced scenarios, such as reacting to URL changes, taking actions such as cancelling ongoing tasks, and highlighting parts of the UI based on changes.

In previous chapters, we learned about components and developed individual pieces; throughout this chapter, we will put these components together within pages and implement routing so we can navigate and send data between them.

In this chapter...

Technical requirements

The code used throughout this chapter is available in the book’s GitHub repository here:

https://github.com/PacktPublishing/Mastering-Blazor-WebAssembly/tree/main/Chapter_04

Understanding routing and pages

With any app you use, whether it’s a native mobile or Windows app or a website, you will see it is made up of a set of pages users can move between. In the scope of the web specifically, we have traditional websites and web apps that work on the server, and we have apps that run fully in the browser, such as Blazor WebAssembly apps.

With the traditional web approach, there is no actual navigation happening in the browser because what happens is that the browser sends a request to the server for a specific URL, the server comes back with the HTML, and then the browser just renders it. On the other hand, with single-page applications, the whole app is running totally in the client, and we have a single HTML page that holds the entire UI of our app. Frameworks such as Blazor, Angular, or ReactJS, for instance, are responsible for replacing part of the UI according to the redirected link with the corresponding component, and that is what we call...

Navigation and parameters

In BooksStore, for example, the user can see a list of books on the Index page, but the user should also be able to click on a book and navigate to another page where all the book details are visible. When we navigate to the details page, we need to pass the book ID to it so that the page knows the book for which the details need to be retrieved.

Luckily, Blazor provides us with powerful and flexible routing and navigation mechanisms that allow us to navigate easily and send data in the URL, either by using the route of the page itself or using query parameters. We are going to explain both in detail.

Passing parameters using the route

Parameters can be sent within the route of the page. The Router component is responsible for detecting those parameters and filling in the values from the URL for the parameters in the targeted component based on the parameter name.

In the next example, we are going to create a BookDetails component and set a route...

Handling a NotFound UI

The Router component in Blazor has two important RenderFragment parameters. The first one is called Found and the other one is called NotFound. You can notice their UI piece values in the App.razor component:

<Router AppAssembly="@typeof(App).Assembly" AdditionalAssemblies="new[] { typeof(Component1).Assembly }">    <Found Context="routeData">
...
    </Found>
    <NotFound>
        <PageTitle>Not found</PageTitle>
        <LayoutView Layout="@typeof(MainLayout)">
            <p role="alert">Sorry, there's nothing at this
              address.</p>
      ...

Reacting to navigation changes

In the logic of your apps, sometimes, you need to react to the navigation of the user by taking them to a new URL for many reasons, such as needing to highlight a certain component in the UI if the user navigates to a specific URL, or needing to execute a piece of code when the user navigates from the current page. In this section, we will learn about the NavLink component and LocationChanged within the NavigationManager service.

The NavLink Component

Blazor contains a built-in component called NavLink. This component is basically just the normal hyperlink tag (<a>) in HTML that allows the user to redirect to a specific link using the href attribute. What makes NavLink different from using the normal HTML hyperlink tag is that NavLink reacts to the URL changes, and if the current URL matches the link defined in its href attribute, it sets a CSS class called active and removes it when the URL doesn’t match. That makes the NavLink component...

Summary

In this chapter, we introduced and applied all the concepts related to navigation and routing in a Blazor WebAssembly application. We started first by understanding routing and the Router component, and then we declared our first component that had a router. After that, we saw how to use the routing abilities in Blazor to transmit data between the pages using route and query string parameters. Then, we learned how to handle the not found UI and designed a simple and neat component for it.

Finally, we saw how we can take action and manipulate the UI when a navigation process happens in an application.

After going through this chapter, you should be able to do the following:

• Create pages in your application and declare routes for them
• Send data between pages using the route and query string parameters
• Provide a custom UI for the not found address
• Take certain actions when a navigation process occurs in the app

In the next chapter, we will start...

Further reading

• Routing in Blazor: https://learn.microsoft.com/en-us/aspnet/core/blazor/fundamentals/routing?view=aspnetcore-7.0