Sorry, there's nothing at this address page displaying when i clicked on the link using C# Blazor

Question

I am trying to learn Blazor following youtube tuturial. I want to display the list of student using the code below. When I clicked on the student link I have "Sorry, there's nothing at this address." please can anyone tell me where I am going wrong

NavBar

    <li class="nav-item px-3">
        <NavLink class="nav-link" href="Pages/Student">
            <span class="oi oi-list-rich" aria-hidden="true"></span> Student data
        </NavLink>
    </li>

Student Controller

    public class StudentController : ControllerBase
    {
    private readonly RazorExampleContext _context;

    public StudentController(RazorExampleContext context)
    {
        _context = context;
    }
    // GET: api/Student
    [HttpGet]
    public async Task<ActionResult<List<Student>>> GetStudent()
    {
        return await _context.Student.ToListAsync();
    }
   }

RaZor Page

 @page "/Student"
 @inject HttpClient Http
  // Display student list    
  <table class="table">
    <thead>
        <tr>
            <th></th>
            <th>Student Id</th>
            <th>Student Name</th>               
        </tr>
    </thead>
    <tbody>
        @foreach (var student in students)
        {
        <tr>
            <td>

                <a class="btn btn-success" href="Student/">Edit</a>
                <button class="btn btn-danger">Delete</button>

            </td>
            <td>student.Id</td>
            <td>student.StudentName</td>
        </tr>
        }
    </tbody>
   </table>
  }
  @code {
       Student[] students { get; set; }
   protected override async Task OnInitializedAsync()
   {
       await LoadStudent();
   }
  async Task LoadStudent()
  {
    students = await Http.GetJsonAsync<Student[]>("api/Student");
  }

 }

Startup.cs

 // This method gets called by the runtime. Use this method to add services to the container.
    // For more information on how to configure your application
 public void ConfigureServices(IServiceCollection services)
    {
        services.AddRazorPages();
        services.AddServerSideBlazor();
        services.AddHttpClient();
        services.AddSingleton<WeatherForecastService>();
        services.AddSingleton<Student>();
    }

Answer 1

This error usually occurs when the Router cannot find the url address provided to it. Change This : <NavLink class="nav-link" href="Pages/Student"> to <NavLink class="nav-link" href="student">

Not related to the answer:

• Why do you do this: services.AddSingleton<Student>(); Student is your model, not a service you're going to inject into your components

• You should verify that the Student array is populated with data before you use it in the foreach loop, otherwise a null reference exception is triggered.

• The route template should be @page "/student" and not @page "/Student" by convention.