ASP.NET Core React(v6.0)模板添加MVC控制器与视图路由失败求助

步骤1：完善服务注册 #

在ConfigureServices中，除了已有的AddControllersWithViews()，还需添加SPA静态文件服务，确保React资源能被正确加载：

services.AddControllersWithViews();
// 注册SPA静态文件服务，指向React项目的构建目录
services.AddSpaStaticFiles(config =>
{
    config.RootPath = "ClientApp/build"; // 开发环境若使用npm dev server，可调整为"ClientApp/public"
});

步骤2：调整中间件与路由顺序 #

中间件顺序直接影响路由匹配逻辑，必须保证MVC路由优先匹配，剩余未匹配的请求再交给React SPA处理。修改Configure方法如下：

if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();
// 生产环境启用SPA静态文件服务
if (!app.Environment.IsDevelopment())
{
    app.UseSpaStaticFiles();
}

app.UseRouting();
// 若项目包含授权逻辑，添加此行
// app.UseAuthorization();

app.UseEndpoints(endpoints =>
{
    // 优先匹配MVC控制器路由
    endpoints.MapControllerRoute(
        name: "default",
        pattern: "{controller=Home}/{action=Index}/{id?}");
    // 单独匹配API控制器（如需区分API路由）
    endpoints.MapControllers();
});

// 配置SPA fallback，未被MVC匹配的请求导向React入口
app.UseSpa(spa =>
{
    spa.Options.SourcePath = "ClientApp";

    if (app.Environment.IsDevelopment())
    {
        // 开发环境启动React dev server
        spa.UseReactDevelopmentServer(npmScript: "start");
    }
});

步骤3：验证MVC视图配置 #

确保HomeController正确返回视图：

public class HomeController : Controller
{
    public IActionResult Index()
    {
        return View();
    }
}

同时确认Views/Home/Index.cshtml文件存在，若使用布局页，需保证Views/_Layout.cshtml配置正常，或直接在Index.cshtml中编写完整页面内容。

关键说明 #

• 路由优先级：MVC路由会先匹配所有符合{controller}/{action}/{id?}规则的请求（比如/Home/Index），直接返回Razor视图；无对应MVC控制器的请求（比如/dashboard）会被SPA fallback捕获，由React路由处理。
• 开发环境：使用React开发服务器时，ASP.NET Core会代理请求到React dev server，但MVC路由依然优先生效，不会被React拦截。
• 生产环境：需先执行npm run build构建React项目，确保ClientApp/build目录存在，ASP.NET Core会直接加载该目录下的静态资源。

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