Basic Blazor Routing Example

This example demonstrates a basic Blazor component with routing, showing how to navigate between different pages within your Blazor application. It defines a simple component that uses the @page directive to specify its route.

Component Definition with Routing

This code defines a Blazor component. The @page directive at the top specifies the route for this component. In this case, the component will be rendered when the user navigates to /myroute in the browser. The rest of the component defines the UI elements (a heading and a paragraph) that will be displayed when the route is accessed.

@page "/myroute"

<h3>MyRoute Component</h3>

<p>This is the content of my route.</p>

Explanation of the @page Directive

The @page directive is crucial for enabling routing in Blazor components. It tells the Blazor framework that this component should be rendered when a specific URL is requested. The string following @page is the relative URL path that activates this component. You can have multiple @page directives in a single component to define multiple routes to it.

How to Navigate to This Component

To navigate to this component, you can simply type /myroute into the browser's address bar. Alternatively, you can use the <NavLink> component in another Blazor component to create a hyperlink to this route. For example: <NavLink href="/myroute">Go to MyRoute</NavLink>

Real-Life Use Case

Imagine you're building an e-commerce website. You might have components for displaying product details, a shopping cart, and a checkout page. Each of these components would have its own route (e.g., /product/{productId}, /cart, /checkout) defined using the @page directive. Users can then navigate between these pages using links or programmatically.

Best Practices

• Keep Routes Consistent: Use a consistent naming convention for your routes (e.g., using plural nouns for collection resources like /products, /categories).
• Use Parameterized Routes: When displaying details of an individual item (e.g., a product), use parameterized routes like /product/{productId}.
• Centralize Route Definitions: Consider using a configuration file or a central class to manage your routes, making it easier to update them and avoid inconsistencies.

When to Use Them

Use the @page directive whenever you want a Blazor component to be directly accessible via a URL. This is essential for building multi-page applications or for creating components that can be linked to from external sources.