.NET 8 Blazor中Navigation Manager导航Razor页面失效问题排查

问题根源分析 #

导航失效主要由以下几个核心问题导致：

• 路由指令错误使用转义反斜杠（\/），破坏了路由匹配规则
• 编辑页面未配置参数接收路由，跳转时也未传递Entity ID
• 跳转路径与目标页面的@page路由定义不匹配
• 页面代码块中未显式声明NavigationManager注入（即使_Imports.razor中已全局注入，显式声明可避免潜在依赖问题）

分步解决方案 #

1. 修复路由指令的转义字符 #

所有页面的@page指令需使用标准格式，去掉多余的转义反斜杠：

• 列表页面（Entities.razor）：@page "/Entities"
• 编辑页面（Edit-Entity.razor）：@page "/Edit-Entity/{EntityId:int}"（添加参数占位符用于接收ID）
• 新增页面（Add_Entity.razor）：@page "/Entities/Add_Entity"（与跳转路径严格匹配）

2. 显式注入NavigationManager #

在列表页面的@code块中添加注入声明，确保依赖可被正确解析：

[Inject]
public NavigationManager NavigationManager { get; set; }

3. 修正跳转逻辑，匹配目标路由 #

• 新增页面跳转：确保路径与新增页面的@page完全一致
• 编辑页面跳转：传递Entity ID参数，匹配编辑页面的带参路由

修正后的列表页面跳转逻辑代码：

private void CreateEntity()
{
    NavigationManager.NavigateTo("/Entities/Add_Entity");
}

private void EditEntity(int entityId)
{
    NavigationManager.NavigateTo($"/Edit-Entity/{entityId}");
}

4. 编辑页面接收并处理ID参数 #

在编辑页面的@code块中添加参数接收逻辑，并加载对应实体数据：

[Parameter]
public int EntityId { get; set; }

private Entity entity;

protected override async Task OnInitializedAsync()
{
    entity = await EntityRepository.GetEntityByIdAsync(EntityId);
}

private async Task SaveChanges()
{
    await EntityRepository.UpdateEntityAsync(entity);
    NavigationManager.NavigateTo("/Entities"); // 保存后返回列表页
}

完整修正后的关键代码示例 #

列表页面（Entities.razor） #

@page "/Entities"

<h3>Entities</h3>

@if (entities == null)
{
    <p>Loading...</p>
}
else
{
    <table class="table">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Is Active</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var entity in entities)
            {
                <tr>
                    <td>@entity.EntityID</td>
                    <td>@entity.EntityName</td>
                    <td>@entity.IsActive</td>
                    <td>
                        <button @onclick="() => EditEntity(entity.EntityID)" class="btn btn-success">Edit</button>  
                    </td>
                </tr>
            }
        </tbody>
    </table>
} 
<button @onclick="CreateEntity" class="btn btn-primary">New Entity</button>

@code { 
    [Inject]
    public NavigationManager NavigationManager { get; set; }

    List<Entity> entities;
    private string message = string.Empty;

    protected override async Task OnInitializedAsync()
    {
        entities = (await EntityRepository.GetAllEntitiesAsync()).ToList();
    }

    private void CreateEntity()
    {
        NavigationManager.NavigateTo("/Entities/Add_Entity");
    }

    private void EditEntity(int entityId)
    {
        NavigationManager.NavigateTo($"/Edit-Entity/{entityId}");
    }
}

编辑页面（Edit-Entity.razor） #

@page "/Edit-Entity/{EntityId:int}"

<h3>Edit Entity</h3>

@if (entity != null)
{
    <div class="col-md-12">
        <div>
            <label for="entityName">Entity Name:</label>
            <input type="text" id="entityName" @bind="entity.EntityName" class="form-control" />
        </div>
        <div class="mt-2">
            <label for="isActive">Is Active:</label>
            <input type="checkbox" id="isActive" @bind="entity.IsActive" />
        </div>
        <div class="my-2 text-danger">
            @message
        </div>
        <div class="my-2">
            <button type="button" class="btn btn-primary" @onclick="SaveChanges">Save Changes</button>
            <button type="button" class="btn btn-secondary ms-2" @onclick="() => NavigationManager.NavigateTo("/Entities")">Cancel</button>
        </div>
    </div>
}
else
{
    <p>Loading...</p>
}

@code {
    [Inject]
    public NavigationManager NavigationManager { get; set; }
    [Inject]
    public EntityRepository EntityRepository { get; set; }

    [Parameter]
    public int EntityId { get; set; }

    private Entity entity;
    private string message = string.Empty;

    protected override async Task OnInitializedAsync()
    {
        entity = await EntityRepository.GetEntityByIdAsync(EntityId);
    }

    private async Task SaveChanges()
    {
        try
        {
            await EntityRepository.UpdateEntityAsync(entity);
            NavigationManager.NavigateTo("/Entities");
        }
        catch (Exception ex)
        {
            message = $"保存失败: {ex.Message}";
        }
    }
}

额外检查项 #

• 确认所有页面文件正确放置在项目的Pages/Entities文件夹下
• 清理项目并重新生成，避免缓存导致的路由不生效
• 打开浏览器开发者工具（F12），查看控制台是否有路由相关错误信息

内容的提问来源于stack exchange，提问作者raiya alazri