.NET 8项目中MVC与ReactTS页面共存运行问题咨询

问题背景 #

我们有一个从.NET 5迁移到.NET 8的Web应用，计划用ReactTS开发新页面并逐步迁移现有.NET页面，要求不影响现有客户。目前做POC时，已将.NET 8应用与ReactTS放在同一解决方案，使用Microsoft.AspNetCore.SpaServices.Extensions包配置了Spa，但运行后React页面正常加载，MVC页面却无法访问。当前program.cs配置如下：

app.UseSpa(spa => 
{ 
        spa.Options.SourcePath = "ClientApp"; 
        spa.UseReactDevelopmentServer("start"); 
});

解决方案 #

完全可以实现MVC页面与ReactTS页面在同一域名和端口下共存，核心是调整中间件顺序并合理划分路由规则，具体步骤如下：

1. 调整中间件执行顺序 #

UseSpa中间件默认会捕获所有未被匹配的请求，所以必须先配置MVC路由，再配置Spa中间件，确保MVC的请求能被优先处理。修改program.cs：

// 先注册MVC路由中间件，确保MVC请求被优先匹配
app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}");

// 再配置Spa中间件
app.UseSpa(spa =>
{
    spa.Options.SourcePath = "ClientApp";

    if (app.Environment.IsDevelopment())
    {
        spa.UseReactDevelopmentServer(npmScript: "start");
        // 可选：指定React开发服务器端口，避免与.NET端口冲突
        spa.Options.DevServerPort = 3000;
    }
});

2. 路由隔离（可选但推荐） #

为了避免React前端路由与MVC路由冲突，建议给React页面指定专属路径前缀（比如/app），具体配置：

.NET端配置

app.UseSpa(spa =>
{
    spa.Options.SourcePath = "ClientApp";

    if (app.Environment.IsDevelopment())
    {
        spa.UseReactDevelopmentServer(npmScript: "start");
        spa.Options.DevServerPort = 3000;
    }

    // 设置React页面的默认访问路径和静态文件前缀
    spa.Options.DefaultPage = "/app";
    spa.Options.DefaultPageStaticFileOptions = new StaticFileOptions
    {
        RequestPath = "/app"
    };
});

ReactTS端配置（以React Router为例）

在React的路由配置中添加basename，确保前端路由与后端前缀匹配：

import { BrowserRouter } from 'react-router-dom';

<BrowserRouter basename="/app">
  {/* 你的路由组件，比如<Routes>...</Routes> */}
</BrowserRouter>

3. 确保静态文件中间件位置正确 #

如果项目中有静态资源（如CSS、图片），要确保UseStaticFiles在UseSpa之前注册，保证MVC的静态资源能正常加载：

app.UseStaticFiles(); // 先处理静态资源

// 然后是MVC路由
app.MapControllerRoute(...);

// 最后是Spa配置
app.UseSpa(...);

测试验证 #

• 访问https://localhost:44341/Home/Index：应加载MVC页面
• 访问https://localhost:44341/app：应加载ReactTS页面
• 若未设置路径前缀，访问未匹配MVC路由的路径（如https://localhost:44341/react-page）会自动跳转至React页面

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