Day 3: Routing & Navigation

Learn how to navigate between pages, use route parameters, and create dynamic URLs.

What is Routing?

• Routing maps URLs to Blazor components (e.g., /counter → Counter.razor).

• Components become pages when you add the @page directive.

Basic Routing

Route Parameters

NavigationManager

NavLink Component

Practice Task

Create a ProductPage Component:

1. Define a route /product/{Id}.

2. Display the product ID from the URL.

3. Add a button to go back to the home page.

Solution

Common Issues (For Beginners)

Key Takeaways

• @page Directive: Turns a component into a routable page.

• Route Parameters: Capture values from the URL with {ParameterName}.

• NavigationManager: Navigate between pages programmatically.

• NavLink: Create styled navigation links.