Blazor NavigationManager 返回“/？”

Question

我将 Blazor 用于我的 Web 项目。我正在学习这个框架，但我遇到了问题。如果我想去另一页，我可以这样做：

<a href="DetailsPage" class="btn btn-primary">Details</a>

现在，我创建了一个登录页面（我的索引页面和 URL 是 https://5000）并检查用户信息。我没有任何授权。如果此信息为真，则用户转到主页，否则用户停留在登录页面。但是，当我尝试真实信息并单击登录按钮时，我会转到主页（https://5000/homepage）并再次返回登录页面（https://5000/?）。当我返回登录页面时，我的 URL 是“https://5000/?”。为什么我返回登录页面并看到“？”。

@page "/"
@using MyProject.Data
@using System.Net.Http
@inject HttpClient Http
@inject IMatToaster Toaster
@inject NavigationManager NavigationManager

<form>
    <div class="form-group">
        <label for="UserName">User Name</label>
        <input type="text" class="form-control" placeholder="User Name" @bind="@UserName">
    </div>
    <div class="form-group">
        <label for="UserPassword">User Password</label>
        <input type="password" class="form-control" placeholder="User Password" @bind="@UserPassword">
    </div>
    <button type="submit" class="btn btn-primary" @onclick="@Login">Log In</button>
</form>

@code {

    private User[] UserList;
    private User[] Control;

    public string UserName, UserPassword;

    protected override async Task OnInitializedAsync()
    {
        await getData();
    }

    protected async Task getData()
    {
        UserList = await Http.GetJsonAsync<User[]>("/api/Users/");
    }

    protected void Login()
    {
        if (String.IsNullOrEmpty(UserName) || String.IsNullOrEmpty(UserPassword))
        {
        }
        else
        {
            Control = UserList.Where(A => A.UserName.Equals(UserName, StringComparison.OrdinalIgnoreCase) && A.UserPassword == UserPassword).ToArray();
            if (Control.Length == 0)
            {   
            }
            else
            {
                NavigationManager.NavigateTo("/homepage");
            }
        }
    }
}

Answer 1

原因是你使用<button type="submit"></button> 在表单元素中。当您单击按钮时，将执行传统的回发，并且浏览器会尝试将表单数据发布到服务器。当然，这不是你的本意。您只想在 SPA 应用程序的空间内导航，对吧？

要解决这个问题，请将 type 属性设置为“button”，如下所示：

<button type="button"></button>

希望这会有所帮助...