Using route templates

When the user makes a request for a page from your web app, they can specify what they want to see with information in the URI. For example:

http://www.contoso.com/pizzas/margherita?extratopping=pineapple

After the protocol and website address, this URI indicates that the user wants to know about margherita pizzas. Also, the query string after the question mark shows that they’re interested in an extra topping of pineapple. In Blazor, you use routing to ensure that each request is sent to the component that can best respond. You also use routing to ensure that the component has all the information it needs to display what the user wants. In this case, you might want to send the request to the Pizzas component and for that component to display a margherita pizza with information about adding pineapple to it.

Blazor routes requests with a specialized component called the Router component. The component is configured in App.razor like this:

razorCopy

<Router AppAssembly="@typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
    </Found>
    <NotFound>
        <p>Sorry, we haven't found any pizzas here.</p>
    </NotFound>
</Router>

When the app starts, Blazor checks the AppAssembly attribute to find out which assembly it should scan. It scans that assembly for components that have the RouteAttribute present. Blazor uses these values to compile a RouteData object that specifies how requests are routed to components. When you code the app, you use the @page directive in each component to fix the RouteAttribute.

In the preceding code, the <Found> tag specifies the component that handles the routing at runtime: the RouteView component. This component receives the RouteData object and any parameters from the URI or query string. It then renders the specified component and its layout. You can use the <Found> tag to specify a default layout, which is used when the selected component doesn’t specify a layout with the @layout directive. You learn more about layouts later in this module.

In the <Router> component, you can also specify what is returned to the user when there isn’t a matching route, by using the <NotFound> tag. The preceding example returns a single <p> paragraph, but you can render more complex HTML. For example, it might include a link to the home page or a contact page for site administrators.

Using the @page directive

In a Blazor component, the @page directive specifies that the component should handle requests directly. You can specify a RouteAttribute in the @page directive by passing it as a string. For example, this attribute specifies that the page handles requests to the /Pizzas route:

razorCopy

@page "/Pizzas"

If you want to specify more than one route to the component, use two or more @page directives, like in this example:

razorCopy

@page "/Pizzas"
@page "/CustomPizzas"

juniper networks training courses malaysia