Blazor NavigationManager正常工作，但会立即重定向回同一页面

Question

这是我的Index.razor页面。

@page "/"
@inject NavigationManager navigation
<PageTitle>Index</PageTitle>
<div class="login-page">
<div class="form">
<div class="login">
<div class="login-header">
<h3>LOGIN</h3>
<p>Please enter your credentials to login.</p>
</div>
</div>
<form class="login-form">
<input type="text" placeholder="username"/>
<input type="password" placeholder="password"/>
<button @onclick=ValidateCredentials>login</button>
</form>
</div>
</div>
@code{
protected override async Task OnInitializedAsync()
{

}
public void ValidateCredentials(EventArgs e)
{
navigation.NavigateTo("/fetchdata");
}
}

当我点击UI上的登录按钮时，fetchdata页面会弹出，但index.razor页面会立即返回例如，点击Index.razor->fetchdata.rarzor(它出现的时间为毫秒(-->index.razor登录uI开始显示。

请告诉我我做错了什么。我对Blazor很陌生，但我想(它可以点击html表单中的事件调用，我可能会使用Editcontext模型(

Answer 1

解释：由于在表单元素中嵌入了button Html元素，因此button元素的type属性默认为"提交"；，这就是为什么执行的第一个操作是将表单提交到任何地方，因为您的应用程序是SPA。。。SPA应用程序中没有使用传统的帖子请求。

navgation.NavigateTo("/fetchdata", forceLoad: true);错误。组件FetchData在应用程序的边界空间内，应该使用forceLoad:false调用它。当你想走出你的应用程序的边界空间时，说你想导航到url"；example.com"；，您应该使用forceLoad:true。

当您使用navgation.NavigateTo("/fetchdata", forceLoad: true);时，实际上是重新加载您的应用程序。这曾经是，也不应该是你的意图。

如何解决这个问题？将button元素放在form元素之外，将type属性设置为button将是一种很好的做法，如下所示：

<form class="login-form">
<input type="text" placeholder="username"/>
<input type="password" placeholder="password"/>
</form>
<button type="button" @onclick=ValidateCredentials>login</button>

和

public void ValidateCredentials(EventArgs e)
{
navigation.NavigateTo("/fetchdata");
}

你注意到form元素是多余的吗？

现在是学习Blazor的好时机。从头开始