I cant see a component which i added as MyButton.razor

Question

I added a component like this: Right-click on pages>add > razor component and this the code:

@page "/MyPage"

<h3>My Page</h3>

<p role="status">Current Time: @currentTime</p>

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

<p>@currentTime</p>

@code

{

private string currentTime = "No times are showing yet";

private void GetTime()

{

    currentTime = "Button clicked!";

}

}

this is the output i am getting:
I cant see the new added component named MyButton but can see other 3 pre-designed components. how to fix this?

This question is related to the following Learning Module

Answer 1

Hi Nafin,

Your component code is fine, but it won't show up in your navigation automatically. To fix this, open the NavMenu.razor file (usually found in Components/Layout/) and add a new navigation entry for your page. For example, add a list item with a NavLink pointing to "/MyPage" (make sure the route matches the @page directive in your component). Save, rebuild, and refresh your browser to see the new link. Should look similar to this:

       <div class="nav-item px-3">
            <NavLink class="nav-link" href="MyPage">
                <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> MyPage
            </NavLink>
        </div>