我创建了单页应用程序，并在其中使用了React, Redux and React-Router。
我想使用ReactJS.NET 渲染此 SPA，以提高加载应用程序的性能。
SPA 使用 Webpack 编译为一个 Bundle.js。
我有一个ASP.NET MVC 应用程序，我可以在其中粘贴此捆绑包，该捆绑包将通过ReactJS.NET 呈现。此 SPA 中的所有内容都将在一个 ASP.NET 视图中使用，但使用 React-router。
我该怎么做？我找不到任何可以用 redux 解决这个组合的项目。
感谢您的示例或帮助。
【问题讨论】：
标签： reactjs react-redux reactjs.net
我知道这是一个老问题，但如果您仍然在将 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.NET？ MVC.NET 堆栈没有什么特别之处，它需要一个单独的项目来启动和运行 React。我会使用 Babel、Webpack、React、React-Dom 和 React-Router 的组合。 MVC.NET 应该只提供捆绑包，其他所有东西都应该是 react 和它的依赖项。
React.NET 默认教程的问题是它没有考虑你使用 webpack 来捆绑你的依赖的事实，而是有手动添加它们的例子。这并不是编写 React 的首选方式，并且试图隐藏设置 React 项目的初始复杂性，从而使复杂的过程变得更加复杂。
建议：
Webpack 将捆绑你的 react-router、react 和 react-dom 等。您需要设置 MVC，使每个 url 请求都由相同的控制器操作处理，这样 React-Router 可以处理 url 更改。这个答案解释了如何做到这一点。 ASP.NET MVC - Catch All Route And Default Route
如果不这样做，MVC 将尝试处理所有 url 路由更改，而不是 React-Router 这样做。
【讨论】：