Express 应用程序未呈现我的反应组件答案

【问题标题】：Express app not rendering my react componentsExpress 应用程序未呈现我的反应组件
【发布时间】：2016-02-19 09:40:27
【问题描述】：

我正在使用 React 构建一个 Express 应用程序。我启动我的服务器，转到 localhost，我看到一个空白页面，当我检查 chrome 上的开发人员工具时，它显示我的 js 文件是纯 HTML。这是为什么呢？

这是我的server.js：

var express = require('express');

var app = express();
var port = process.env.NODE_ENV || 3000;

app.get('*', function(req, res) {
    res.sendFile(__dirname + '/public/views/index.html');
});

app.listen(port, function() {
    console.log('Listening to http://localhost:' + port);
});

这是我的app.js：

var React = require('react'),
    ReactDOM = require('react-dom');

var App = React.createClass({displayName: "App",
    render () {
        return (
            React.createElement("h1", null, "Hello World!!!!!")
        )
    }
});

ReactDOM.render(React.createElement(App, null), document.getElementById('main-app'));

我的index.html：

<body>
    <div id="main-app"></div>
</body>
<script src="public/assets/dist/javascripts/app.js"></script>

这是我在开发者工具上看到的： image

【问题讨论】：

标签： node.js express reactjs

【解决方案1】：

问题是无论您向服务器请求什么文件，您总是返回index.html。

所以当你转到http://localhost:3000/ 时，你会得到index.html

问题是您的index.html 然后请求public/assets/dist/javascripts/app.js，但您仍然返回index.html，就好像它是app.js。

您需要更新您的路线，以便它返回所请求的文件。

我认为将此添加到您的 server.js 可能会解决它。

app.use(express.static(__dirname + '/public'));

代替

app.get('*', function(req, res) {
    res.sendFile(__dirname + '/public/views/index.html');
});

【讨论】：

谢谢！这解决了我的问题，但现在我得到了Cannot GET /javascripts。