How does Blazor resolve a nested component that has @page directive

user_3813371 0
Viewed 64

I'm trying to understand component re-usability in Blazor.

In this tutorial, the Counter component [which also has a @page directive] is added inside the Index component.

So, is the @page directive ignored for the nested component?

Counter

@page "/counter"

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;  
        
    private void IncrementCount()
    {
        currentCount ++;
    }
}

Index

@page "/"

<h1>Hello, world!</h1>

Welcome to your new app.

<SurveyPrompt Title="How is Blazor working for you?" />

<Counter />
blazor
2 Answers

So, is the @page directive ignored for the nested component?

Yes.

There is no real distinction between Components and Pages in Blazor. As you can also tell from the Add|New menu. There is only one option.

When you add an @page "..." the Component becomes routable and the router will instantiate it in the @Body element in MainLayout.razor.

user_607610

The @page directive is only for routing. It affects nothing else about a component. You could tile 20 pages into a single page if you had some reason to do so, simply by adding them like you would any other component.

user_34331780
Related