Routing in Blazor

Blazor comes with a client-side router (Microsoft.AspNetCore.Blazor.Routing.Router, see source on GitHub. At the time of writing, the router is quite limited compared to e.g. Angular’s router. However, it already contains all you need to create basic web apps that consist of multiple pages.

The router looks for all classes that implement Microsoft.AspNetCore.Blazor.Components.IComponent in the assembly specified in App.cshtml (see above). Each component class has to have a Microsoft.AspNetCore.Blazor.Components.RouteAttribute that specifies the route template. In .cshtml, the attribute is set using @page (e.g. @page "/hello-planet/{Planet}"). If you implement a component without a template in pure C#, you have to use the attribute (e.g. [RouteAttribute("/hello-planet/{Planet}")]). Note that @page directives are turned into RouteAttribute attributes in the background by the Blazor template compiler.

Notice I added more thenone @page, Components can have multiple routes on which they are available. If you need that, just add multiple @page directives or RouteAttribute attributes.

Content Not found

The Blazor Router component lets you specify custom content if the content isn’t found for the requested route.

Go to the App.razor file, inside the <notFoundContent> you can set custom content, you can include arbitrary items,such as other interactive components.

<CascadingAuthenticationState>
    <Router AppAssembly="typeof(Startup).Assembly">
        <NotFoundContent>
            <p>Sorry, there's nothing at this address.</p>
        </NotFoundContent>
    </Router>
</CascadingAuthenticationState>

Parameters

Route templates can contain parameters. In @page "/routing/{name}", {name} would be such a parameter. Parameters are assigned to properties of the component. These properties must be annotated with the ParameterAttribute. Here is an example for a simple template with a route parameter:

Managing Links

You can define relative links as usual with the HTML element a. The default Blazor templates adds a base element to index.html: <base href="/" />. Therefore, relative links will not reload the entire page but will be handled by Blazor’s router on the client-side.

Blazor also comes with a helper class NavLink that can be used as an alternative. It automatically sets the active CSS class if the href matches the current URI.

Blazor does not recreate a component if only the URL parameters change. If a user is in the sample shown above already on the page databinding and clicks on the link Hello Nativo, no new instance of the databinding class is created. The existing class is reused instead.

Query Parameters

You can add query parameters using the IUriHelper default service. The following example shows how this can be done. Note that it requires referencing the NuGet package Microsoft.AspNetCore.WebUtilities in your .csproj file.

Tips

IUriHelper can also be used to trigger navigation in code. The following example demonstrates how to navigate when the user clicks a button.

Looking good

Now that we have mastered Routing, we can dive deeper into the framework, let’s see how Data Binding and Events work on Blazor.