React + .NET项目发布后路由异常，频繁出现404错误求助

问题根源 #

开发环境中React的dev server会自动将所有请求转发到index.html，让前端路由接管处理；但发布后使用.NET服务器时，服务器会尝试寻找对应路由路径的物理文件，找不到就返回404，这是SPA应用的典型路由适配问题。

解决步骤 #

1. 配置.NET服务器的路由 fallback #

修改ASP.NET Core项目的Program.cs，添加路由 fallback 规则，让所有未匹配到后端接口的请求都返回index.html：

var builder = WebApplication.CreateBuilder(args);

// 添加服务（如控制器、SPA服务等）
builder.Services.AddControllersWithViews();
builder.Services.AddSpaStaticFiles(configuration =>
{
    configuration.RootPath = "ClientApp/build"; // 指向React打包后的目录，根据你的项目结构调整
});

var app = builder.Build();

// 其他中间件配置（如异常处理、静态文件、认证授权等）
app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseSpaStaticFiles();

app.UseRouting();

// 映射后端控制器路由
app.MapControllerRoute(
    name: "default",
    pattern: "{controller}/{action=Index}/{id?}");

// 关键：所有未匹配的请求都返回index.html，交给前端路由处理
app.MapFallbackToFile("index.html");

// SPA配置（如果使用）
app.UseSpa(spa =>
{
    spa.Options.SourcePath = "ClientApp";
});

app.Run();

2. 确保React Router使用BrowserRouter #

确认你的React应用根组件中用BrowserRouter包裹路由（react-router-dom v6版本）：

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './components/Home';
import SignIn from './components/SignIn';
// 其他组件导入

function App() {
  const [isAuthorized, setIsAuthorized] = useState(false);
  // 权限判断逻辑...

  return (
    <Router>
      <Routes>
        <Route element={<Home isAuthorized={isAuthorized} />} path="/" />
        <Route element={<SignIn />} path="/auth/sign-in" />
        <Route element={<SignUp />} path="/auth/sign-up" />
        {isAuthorized && (
          <Route
            element={<AccountSetting isAuthorized={true} />}
            path="/auth/account-setting"
          />
        )}
        {isAuthorized && (
          <Route
            element={<Games isAuthorized={true} />}
            path="/game/games"
          />
        )}
        <Route
          element={<MainGame isAuthorized={isAuthorized} />}
          path="/game/main-game"
        />
        <Route element={<About />} path="/about" />
        <Route element={<Features />} path="/landing/features" />
        <Route element={<FreeTrial />} path="/landing/free-trial" />
      </Routes>
    </Router>
  );
}

export default App;

3. 配置React打包的相对路径 #

在React项目的package.json中添加homepage字段，确保静态资源路径正确：

{
  "name": "your-react-app",
  "homepage": ".",
  // 其他配置...
}

或者在执行build命令时指定public-url：

npm run build -- --public-url ./

额外注意点 #

• 避免直接刷新前端路由页面：在未配置fallback前，刷新非根路径会触发服务器404，配置后即可正常处理。
• 权限路由的渲染：确保isAuthorized状态在客户端渲染时的正确性，比如从localStorage读取或通过API验证后再渲染路由，避免因状态未初始化导致路由不显示。

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