sukesh
sukesh

Reputation: 2437

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

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 />

Upvotes: 2

Views: 451

Answers (2)

Bennyboy1973
Bennyboy1973

Reputation: 4226

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.

Upvotes: 1

Henk Holterman
Henk Holterman

Reputation: 273494

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.

Upvotes: 2

Related Questions