CODEWITHSUNDEEP
blazorblazor-client-side
btm2424
btm2424

Reputation: 631

Blazor - Navigating to a different page

I would like to learn a bit about Blazor, so I'm making a simple website using a Blazor Minimal Project Template (https://marketplace.visualstudio.com/items?itemName=GregTrevellick.BlazorMinimalProjectTemplate).

I created a Pages folder, in which I have About.razor and Index.razor

In the About.razor I only have:

@page "/about"

<h3>About</h3>

I would like to be able to go from index page to about page. I'm trying to achieve this with a simple link in Index.razor:

<a href="About">About</a>

Unfortunately, this only changes the URL from localhost:1111 to localhost:1111/About but the page doesn't change (it's still the index page).

Even if I write the URL (/about), I'm still on the index page.

What's the best way to navigate to a different page using Blazor?

Upvotes: 1

Views: 1182

Answers (1)

Jason D
Jason D

Reputation: 2087

It looks like the template you selected is very minimal!

HMZ has the right idea. For your reference, I tried this and it worked for me.

Layout.razor (new file stored in Shared Folder)

@inherits LayoutComponentBase

<div class="page">
    <div class="main">
        <div class="content px-4">
            @Body
        </div>
    </div>
</div>

MyApp.razor

@using Microsoft.AspNetCore.Components.Routing
@using BlazorMinimal1.Shared

<Router AppAssembly="@typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(Layout)" />
    </Found>
    <NotFound>
        <p>Sorry, there's nothing at this address.</p>
    </NotFound>
</Router>

IMO, If you are trying to learn about Blazor you might be better off using the standard templates provided in Visual Studio.

Upvotes: 1

Related Questions