React Router与ASP.NET Core集成问题：无法访问Blog组件报404错误

哥们，我太懂你这种遇到React Router + ASP.NET Core 404的崩溃感了！这个问题的核心其实是客户端路由和服务器路由的冲突——当你直接在地址栏输入/Blog或者刷新页面时，浏览器会向ASP.NET Core服务器发送请求，但服务器根本不知道这个路由是属于前端React的，它会去寻找对应的后端控制器/路由，找不到就直接返回404了。

下面给你一步步解决的方案：

1. 配置ASP.NET Core回退路由，让前端接管所有路由请求 #

这是最关键的一步，你需要告诉ASP.NET Core：如果找不到对应的后端路由，就返回前端的index.html，让React Router来处理客户端路由。

针对.NET 6+（Program.cs） #

在你的Program.cs里，确保在配置路由的部分添加回退路由：

var builder = WebApplication.CreateBuilder(args);

// 其他服务配置...

var app = builder.Build();

// 启用静态文件中间件（必须有，不然加载不了dist里的bundle.js）
app.UseStaticFiles();

// 映射后端控制器路由
app.MapControllers();

// 添加这一行：所有找不到的路由都返回index.html
app.MapFallbackToFile("index.html");

app.Run();

针对.NET 5及以前（Startup.cs） #

在Startup.cs的Configure方法里：

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    // 其他中间件配置...

    app.UseStaticFiles();

    app.UseRouting();

    app.UseAuthorization();

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapControllers();
        // 添加回退路由
        endpoints.MapFallbackToFile("index.html");
    });
}

2. 检查React Router的配置是否正确 #

确保你用的是BrowserRouter（不要用HashRouter，除非你有特殊需求），并且路由规则配置正确：

// 你的index.js或者App.js里
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Blog from './components/Blog';
import Home from './components/Home';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        {/* 确保路径和你访问的一致，注意大小写！比如你访问的是/Blog，这里path要对应 */}
        <Route path="/Blog" element={<Blog />} />
      </Routes>
    </Router>
  );
}

export default App;

3. 验证webpack和静态资源路径配置 #

看你提供的webpack配置，publicPath: 'dist/'和输出路径path.resolve(__dirname,'wwwroot/dist')是没问题的，但要确保你的index.html里引用bundle.js的路径正确：

<!-- wwwroot/index.html里的脚本引用 -->
<script src="dist/bundle.js"></script>

另外，一定要确保ASP.NET Core启用了UseStaticFiles()中间件，不然服务器不会提供wwwroot里的静态资源，也会导致bundle.js加载失败（这也是404的常见原因之一）。

最后验证 #

重启ASP.NET Core服务器和webpack的watch任务，然后再尝试访问/Blog：不管是从首页跳转过去，还是直接在地址栏输入，都应该能正常加载Blog组件了。

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