React Router 6与.NET SPA：如何排除/api端点不被路由拦截？

针对你遇到的同一端口下/api请求被React Router拦截的问题，可以通过后端路由优先级配置+前端路由排除的组合方式解决，同时满足单容器部署的要求：

1. 调整.NET后端的路由执行顺序 #

.NET的中间件是按注册顺序执行的，只要把API路由的注册放在SPA fallback之前，就能让/api开头的请求优先被后端处理，不会转发给React。

在Program.cs中按以下顺序配置：

var builder = WebApplication.CreateBuilder(args);

// 注册控制器服务
builder.Services.AddControllers();

// 注册SPA静态文件服务（对应React构建后的静态资源）
builder.Services.AddSpaStaticFiles(config =>
{
    config.RootPath = "ClientApp/build"; // 根据你的React项目路径调整
});

var app = builder.Build();

// 启用路由中间件
app.UseRouting();

// 先映射API控制器，处理所有/api开头的请求
app.MapControllers();

// 启用SPA静态文件服务，加载React的CSS、JS等资源
app.UseSpaStaticFiles();

// 最后配置SPA fallback：所有非API、非静态文件的请求，才转发到React的index.html
app.UseSpa(spa =>
{
    spa.Options.SourcePath = "ClientApp";
    // 开发环境下可以启用React dev server，生产环境注释掉即可
    if (app.Environment.IsDevelopment())
    {
        spa.UseReactDevelopmentServer(npmScript: "start");
    }
});

2. 前端React Router避免匹配/api路径 #

不需要在React Router中定义任何以/api开头的路由，这样即使有请求意外到达前端，React Router也不会拦截，而是走到你的404或catch-all路由（但实际这些请求已经被后端处理了）。

如果用createBrowserRouter：

import { createBrowserRouter, RouterProvider } from "react-router-dom";
import App from "./App";
import Dashboard from "./Dashboard";
import Login from "./Login";
import NotFound from "./NotFound";

const router = createBrowserRouter([
  {
    path: "/",
    element: <App />,
    children: [
      { path: "dashboard", element: <Dashboard /> },
      { path: "login", element: <Login /> },
      // 这里只定义前端业务路由，不要加/api相关路由
    ],
  },
  // 处理所有未匹配的前端路由（不包括/api，因为已经被后端拦截）
  { path: "*", element: <NotFound /> },
]);

function Root() {
  return <RouterProvider router={router} />;
}

export default Root;

如果用传统的BrowserRouter + Routes写法：

import { BrowserRouter, Routes, Route } from "react-router-dom";
import App from "./App";
import Dashboard from "./Dashboard";
import Login from "./Login";
import NotFound from "./NotFound";

function Root() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<App />}>
          <Route path="dashboard" element={<Dashboard />} />
          <Route path="login" element={<Login />} />
        </Route>
        <Route path="*" element={<NotFound />} />
        {/* 不要添加任何path="/api/*"的路由 */}
      </Routes>
    </BrowserRouter>
  );
}

export default Root;

3. 验证效果 #

部署到容器后，测试[URL:PORT]/api/myendpoint，应该能正常返回后端接口的响应，而不会被React Router拦截到404或其他前端页面。

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