导航管理器.NavigationManager.Uri不会更新，除非页面被刷新。如何在Blazor Server中获取真正的当前URI？

Question

我有一个侧边菜单中的链接，像这样（Blazor Server）：

<NotAuthorized>
  <li class="nav-item px-3">
    <NavLink class="nav-link" href="@($"LoginIDP?redirectUri=
    {NavigationManager.Uri}")">
       Login
    </NavLink>
  </li>
</NotAuthorized>

简单来说，我想让redirectUri={NavigationManager.Uri}这部分在用户所在的每个页面/组件中被更新为当前URI，以便无论用户在哪个页面/组件点击登录链接，都会将正确的redirectUri传递到登录页面。

但实际上，当用户在页面上点击其他<NavLink>时，浏览器地址栏中的URI会发生变化，页面内容也会发生变化，但NavigationManager.Uri除非我刷新页面，否则保持不变。

这是设计如此吗？我该如何获得真正的当前URI，而不必更改每个链接以进行某些事件调用以强制更新？

- thankyoussd

Answer 1

点击按钮时，页面仅更改内容，但呈现NavigationManager.Uri的组件不会重新渲染，因此您可能需要以某种方式重新渲染组件。 其中一种方法是订阅NavigationManager的LocationChanged事件，并调用StateHasChanged以重新渲染该组件。 您可以查看文档中的此示例并进行适当修改。

@implements IDisposable
@inject NavigationManager NavigationManager

@* Your component *@
<NotAuthorized>
  <li class="nav-item px-3">
    <NavLink class="nav-link" href="@($"LoginIDP?redirectUri=
    {NavigationManager.Uri}")">
       Login
    </NavLink>
  </li>
</NotAuthorized>

@code {
    
    private void HandleLocationChanged(object sender, LocationChangedEventArgs e)
    {
        // rerender component
        StateHasChanged();
    }

    protected override void OnInitialized()
    {
        // add to the NavigationManager event
        NavigationManager.LocationChanged += HandleLocationChanged;

    }

    public void Dispose()
    {
        // remove from the NavigationManager event
        NavigationManager.LocationChanged -= HandleLocationChanged;
    }
}

- Vencovsky

---

谢谢。子组件不重新渲染确实是问题所在。所以我所要做的就是钩入NavigationManager.LocationChanged事件并调用StateHasChanged，这将重新渲染父组件（在我的情况下是NavMenu）以及子组件。你的代码仍需要StateHasChanged才能工作。currentLocation是不必要的，因为StateHasChanged将重新渲染NavigationManager.Uri。 - thankyoussd

如果这解决了你的问题，请不要忘记将答案标记为已接受并点赞，谢谢！ - Vencovsky