单击链接时，blazor 不会更改页面

Question

我正在将我的个人博客迁移到 Blazor，但遇到了问题。我正在开发“下一篇文章”功能，当单击链接时，blazor（或浏览器）不会重定向用户。帖子是下一条路线下的“同一页”@page "/post/{Url}

例如，用户位于domain.com/post/foo，并且在该站点中有指向domain.com/post/bar 的链接。 这是一个简单的链接，如下所示：

<a href="post/bar" title="@Post.Title">
    @Post.Title 
</a>

当用户点击链接时，浏览器的 url 会发生变化，页面的位置会移动到顶部，但页面内容没有变化。

我注意到当我从post 页面点击到另一个页面时会发生这种行为，但不会从网站的“索引” (/) 或当我点击帖子上的标签时发生，链接到domain.com/tags/{tag}。

需要注意的一点是，如果我在浏览器中选择 url 并单击 enter 或刷新页面，它实际上会转到我单击的页面，在这种情况下为 domain.com/post/bar

我的问题是，这是实际预期的行为还是错误？如果这是预期的行为，是否有任何方法可以使 url 实际转到单击的 url 而不是留在同一页面中。

如果这很重要，我正在使用 net5.0。

谢谢。

Answer 1

作为@enet 答案的补充，您可能正在获取OnInitialized/OnInitializedAsync 中Url 属性引用的帖子。请参阅@enet 答案中的最后一段。

解决这个问题的一种方法是：

• 将加载数据的代码放在单独的方法中，例如LoadDataAsync
• 在SetParameters/SetParametersAsync 中检测数据引用（在您的情况下为Url）是否已更改，如果是，请致电LoadDataAsync。

这里的关键是了解组件生命周期并将代码放在正确的位置。

在OnInitialized 和SetParameters 上放置断点，并在加载和导航时观察它们何时被击中。

Answer 2

当我从post 页面点击进入另一个页面时

domain.com/post/foo 和domain.com/post/bar 中的post 绝对不是页面而是文字路径段。

我创建了一个名为 Foo 的可路由组件：

Foo.razor

@page "/post/foo"

@code {
}

Foo 是一个可路由的组件；也就是说，它是一个页面，可以通过在浏览器的地址栏中键入 url、使用锚元素或 NavigationManager 来访问。您也可以将其嵌入到父组件中。

post，正如我上面所说，是一个文字路径段

但如果你坚持认为帖子实际上是一个组件页面，那么我猜它可能看起来像这样：

Post.razor

@page "/post"
@page "/post/{Param}"
<a href="post/bar" title="Title">
Title 
</a>

<div>@Param</div>
@code {

    [Parameter]
    public string Param {get;set;}
}

现在，当您在地址栏中输入如下网址时： https://localhost:<port-number>/post

您将被导航到发布可路由组件（页面）

如果点击锚元素，地址栏的url会变成https://localhost:<port-number>/post/bar

bar 不是组件；它是一个参数。地址栏变了，但是你好像在同一个帖子组件中，但是数据或者内容，确实变了……

请注意，当您单击锚元素时，您将被导航到 一个新的 Url（“post/bar”），但渲染引擎不会创建 Post 组件的新实例来渲染页面，而是将其视为具有更改参数的同一页面。因此，看起来没有发生任何导航，除了地址栏中的 url 之外，没有任何变化。我并不是说您的问题是相同的，但它可能源于类似的代码使用。 请注意，由于 Blazor 不会创建新的组件实例，而是使用现有的组件实例，因此 OnInitialized(Async) 对只能运行一次......因此您必须使用 SetParametersAsync 方法（“ on initializedAsync 正在获取”nextPost “来自后端的信息，但它只是一个普通的 http cal”）

以上所有内容都是为了要求您做最简单的事情并提供路线模板........

bar 是一个组件吗？ foo 是一个组件吗？

Answer 3

因为它违反了 ASPNetCore 团队的一些组件参数建议，所以撤回了答案 - 请参阅 https://github.com/dotnet/aspnetcore/issues/24599