具有react模板的Asp.net核心Web应用程序：在开发中，服务器会首先检查mvc路由，但在生产过程中，服务器仅返回index.html

问题描述

我正在尝试将使用剃刀页面的现有MVC应用程序迁移到Web API + ReactJS客户端。我正在逐步执行此步骤，这意味着我已经迁移了主页（首页/索引）以及其他一些页面/功能以进行响应。剃刀页面与在react中实现的页面之间存在链接。这在运行React开发服务器的开发环境中完美工作。

例如，在开发环境中，如果我路由到localhost：12345 / Controller / Action（对于可用的Controller和操作），服务器将执行相应的操作并返回正确的视图，并且如果我尝试访问一个未知的路由服务器将返回index.html，然后react-router从此开始处理路由。这是公认的行为，在开发环境中就像魅力一样。

但是，当我构建react应用并在生产模式下运行该应用时，情况会发生变化。该请求永远不会到达服务器，并由react-router在客户端进行处理。当我硬刷新页面时，它会触发接受的MVC操作。

我希望具有与产品开发相同的行为。

这是starup.cs文件的外观。

        // ConfigureServices
        .
        .
        .
        // In production,the React files will be served from this directory
        services.AddSpaStaticFiles(configuration =>
        {
            configuration.RootPath = "ReactSource/build";
        });
        .
        .
        .


       
        // Configure
        .
        .
        .
        app.UseStaticFiles();
        app.UseSpaStaticFiles();
        app.UseMvc(routes =>
        {
            routes.MapRoute(
                name: "default",template: "{controller}/{action}");
        });


        app.UseSpa(spa =>
        {
            spa.Options.sourcePath = "ReactSource";

            // do not start the react development server in production
            if (env.IsDevelopment()) { spa.UseReactDevelopmentServer(npmScript: "start"); }
        });
        .
        .

知道我在这里缺少什么吗？我应该为此修改react-router吗？

解决方法

我通过开箱即用的服务工作程序关闭（注销）create-react-app来解决我的问题，该工作程序试图缓存资产并阻止了请求到达服务器。

在index.js文件中，我只是导入了{ unregister } from "./registerServiceWorker"，并在自动生成的index.js文件末尾用registerServiceWorker();替换了unregister();。

,

要拥有 Progress Web 应用程序，您必须在 React Web 应用程序中启用 Service Worker。

要在生产模式下解决缓存问题，您必须在index.tsx文件中输入以下代码：

ReactDOM.render(
    <BrowserRouter basename={baseUrl}>
        <App />
    </BrowserRouter>,rootElement);

//index page is Route exact path.
if (window.location.href.includes('index'))
    registerServiceWorker();
else
    unregisterAndReload();

function unregisterAndReload() {
    navigator.serviceWorker.ready.then(registration => {
        registration.unregister().then(() => {
            window.location.reload();
        });
    });
}

和 App.tsx 文件应如下所示：

render() {
        return (
            <Layout>
                <Route exact path='/index' component={Home} />
                <Route path='/contact' component={ContactUs} />
            </Layout>
        );
    }