Creating navigation

This guide builds on the previous steps of Using Child Component. At this stage of development, the online shop has a product list page and a product detail page.

This step of the tutorial guides you through adding navigation for the product list page to the check-out page with the following steps:

• Add a navigation link to navigate to the check-out page.
• Set the URL for the check-out page.

Adding a navigation link

After the users click on the Buy button in the product list page, we have to introduce a check-out page where the users can fill-in their information and then you can deliver the goods. Use <NavLink> pre-built component of Blazor WebAssembly to create a link to the check-out page in your ProductList.razor component.

<NavLink href="check-out">Check-out</NavLink>

 Blazor WebAssembly will use the <NavLink> component to generate an <a> tag that will navigate you to yourwebsite/check-out.

Set URL for a component

Now, from the product list page, you can navigate to the check-out page. However, Blazor WebAssembly does not know which component to navigate to and you need to tell Blazor WebAssembly which component.

1. Create a new Checkout.razor component  in the Pages folder.
2. Add @page directive at the top of the page.

@page "/check-out"

What's next?

The next step will walk you through on how to collect user information with form.