我创建了单页应用程序，其中使用了 React、Redux 和 React-Router。
我想使用 ReactJS.NET 渲染此 SPA，以提高加载应用程序的性能。
SPA 使用 Webpack 编译为一个 Bundle.js。
我有一个 ASP.NET MVC 应用程序，我可以在其中粘贴此包，该包将通过 ReactJS.NET 呈现。此 SPA 中的所有内容都将在一个 ASP.NET View 中工作，但使用 React-router。
我怎样才能做到这一点？我找不到任何用 Redux 解决这个组合的项目。
最佳答案
我知道这是一个老问题，但如果您在将 React 应用程序合并到 React.NET 时仍然遇到问题，您应该尝试以下模板并看看如何 this fellow has done it .
他使用 webpack 首先构建并编译一组特定于服务器的代码，然后将编译后的 js 拉入 React.NET
app.UseReact(config =>
{
config
.SetLoadBabel(false)
.AddScriptWithoutTransform("~/js/react.server.bundle.js");
});
webpack 配置如下所示。
var path = require('path');
var webpack = require('webpack');
var WebpackNotifierPlugin = require('webpack-notifier');
module.exports = {
entry: {
server: './React/server.jsx',
client: './React/client.jsx',
clientWithRender: './React/clientWithRender.jsx',
},
output: { path: __dirname + '/wwwroot/js/', filename: 'react.[name].bundle.js' },
module: {
loaders: [
{
test: /.jsx?$/,
loader: "babel-loader",
exclude: /node_modules/,
query: {
presets: ['es2015', 'react'],
plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy']
}
}
]
},
plugins: [
new WebpackNotifierPlugin()
]
};
这是索引
@{
Layout = null;
}
<html>
<head>
<title>Hello React</title>
</head>
<body>
<div id="app">
@{
if (Environment.GetEnvironmentVariables()["ASPNETCORE_ENVIRONMENT"].ToString() != "Development")
{
@Html.React("ReactComponents.App", new { val1 = "Top text" });
}
}
</div>
@{
if (Environment.GetEnvironmentVariables()["ASPNETCORE_ENVIRONMENT"].ToString() != "Development")
{
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js"></script>
<script src="@Url.Content("~/js/react.client.bundle.js")"></script>
@Html.ReactInitJavaScript()
}
else
{
<script src="@Url.Content("~/js/react.clientWithRender.bundle.js")"></script>
}
}
</body>
</html>
关于reactjs - 如何使用 ReactJS.NET 通过 redux 渲染 React 应用程序？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40238903/