Blazor Web App中App.razor出现意外Routes标记元素警告的解决办法

警告原因 #

在.NET 8及以上版本的Blazor Web App项目中，官方采用了新的路由架构：Routes.razor作为路由配置的核心组件，由框架自动关联并渲染。手动在App.razor中添加<Routes>标签，会被IDE判定为不符合默认架构设计，从而触发警告（程序仍能运行，但写法不规范）。

解决方案 #

方案1：遵循官方架构（推荐） #

1. 修改App.razor：移除<Routes @rendermode="new InteractiveServerRenderMode(prerender: false)" />这一行，保留HTML文档结构和错误处理UI。修改后的代码如下：

@inject IHostEnvironment Env

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="/" />
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
    <link rel="stylesheet" href="_content/Radzen.Blazor/css/standard-base.css">
    <script src="_content/Radzen.Blazor/Radzen.Blazor.js"></script>
    <link href="css/site.css" rel="stylesheet" />
    <link href="OD.Dax.UX.styles.css" rel="stylesheet" />
    <link rel="icon" type="image/png" href="favicon.png"/>
    <HeadOutlet @rendermode="new InteractiveServerRenderMode(prerender: false)" />
</head>
<body>
    @if (Env.IsDevelopment())
    {
        <text>
            An unhandled exception has occurred. See browser dev tools for details.
        </text>
    }
    else
    {
        <text>
            An error has occurred. This app may no longer respond until reloaded.
        </text>
    }
    <div id="blazor-error-ui">
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>

    <script src="_framework/blazor.web.js"></script>
</body>
</html>

2. 配置全局渲染模式：打开Program.cs，将渲染模式配置移至路由映射代码中，确保全局生效：

app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode(prerender: false);

方案2：自定义路由组件名称（不推荐） #

若需手动控制路由组件的渲染位置，可将Routes.razor重命名为AppRoutes.razor（或其他名称），然后在App.razor中引用自定义组件：

<AppRoutes @rendermode="new InteractiveServerRenderMode(prerender: false)" />

此方式可规避警告，但不符合官方推荐的项目架构，不建议长期使用。

内容的提问来源于stack exchange，提问作者Obsidian Delta