在 ASP.NET 核心 MVC 中显示 React 应用程序的方法

Question

我有一个现有的 ASP.NET 核心 MVC 网站，并且正在考虑将 React 应用程序放到服务器端视图之一（例如 Views/gallery.cshtml 下）。这里不涉及复杂的路由，因为它纯粹是 React 应用程序的单一视图。顺便说一下，React 应用程序是通过 create-react-app (CRA) 创建的。

每当我转到特定路线时，比如 /gallery，我都会看到 React 应用程序，否则，它只会按照正常情况从 MVC 服务器端视图呈现。

我不想让整个 MVC 网站成为一个 SPA 应用程序，并且有兴趣知道是否有任何其他潜在的解决方案来实现这一目标。

Answer 1

是的，你可以做到。在给出 npm 运行 build 后，复制 static 文件夹到你的 mvc 应用程序根目录并在你的视图页面上引用那些 css 和 js，它会将您的 React 应用渲染到您的 mvc 视图中。

Answer 2

虽然使用 npm run build 可能有效，但我最终选择了 webpack/babel 方法，因为我认为它可以让我更好地控制捆绑和优化。关键位如下：

.babelrc

{
    "presets": [
      "@babel/preset-react"
    ],
    "plugins": [
    ]
}

webpack.config.js

const path = require("path");

module.exports = {
    entry: {
        index: "./src/index.js"
    },
    output: {
        path: path.resolve(__dirname, "../wwwroot/dist"),
        filename: "[name].js"
    },
    module: {
        rules: [
            {
                use: {
                    loader: "babel-loader"
                },
                test: /\.js$/,
                exclude: /node_modules/
            },
            {
                use: ["style-loader", "css-loader"],
                test: /\.css$/i
            }
        ]
    }
}

所以使用webpack/babel编译并打包了React app，然后输出到指定的目录。我把它直接放在 /wwwroot 下面，在 MVC 视图中可以很容易地引用它。

在 ASP.NET 核心 MVC 中显示 React 应用程序的方法

Ways to display a React app in ASP.NET Core MVC

c#

asp.net-mvc

reactjs

asp.net-core

create-react-app