反应应用程序未在 Express 中呈现反应组件答案

【问题标题】：react application not rendering react component in Express反应应用程序未在 Express 中呈现反应组件
【发布时间】：2019-12-18 05:58:57
【问题描述】：

我正在使用 React 和 node.js 构建一个 MVC Express 应用程序。我在公共文件夹中有 index.html，在视图文件夹中有 index.jsx

然后，我启动我的服务器，转到 localhost，我看到一个空白页面，我尝试了很多解决方案，但都没有解决问题

这是文件结构

   +-- app.js
   +-- public
   |   +-- index.html
   +-- routes
   |   +-- index.js
   +-- views
   |   +-- index.jsx

这是根目录中的 app.js

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

var indexRouter = require('./routes/index');


var app = express();

app.set('views', __dirname + '/views');
app.set('view engine', 'jsx');
app.engine('jsx', require('express-react-views').createEngine());

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
//app.use(express.static(path.join(__dirname, 'public')));
app.use(express.static(__dirname + '/public'));
app.use('/', indexRouter);
app.use('/users', usersRouter);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

这是 public/index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.2/react.min.js" type="text/javascript"></script>
       <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.6.2/react-dom.min.js" type="text/javascript"></script>
       <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js" type="text/javascript"></script>

    <title>MERN</title>
    <meta name="viewport" content="width=device-width">

  </head>
  <body>


  <div id="root"></div>
<script type="text/javascript"  ></script>
  </body>
</html>

和views/index.jsx

import React from 'react';
import ReactDOM from 'react-dom';



 ReactDOM.render(
  <h1>hello express</h1>,document.getElementById('root')
);

路由器/index.js



var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
 // res.render('index', { title: 'Express'}); this is the old line
  res.render('index.html');
});

module.exports = router;

【问题讨论】：

打开开发者控制台页面有Log吗？
控制台不登录
你能分享你的indexRouter 吗？你也能在页面 html 中看到一些东西吗？
我将 routers/index.js 添加到问题中

标签： reactjs express

【解决方案1】：

尝试在 routers/index.js 文件中使用 sendFile 而不是 render

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
 // res.render('index', { title: 'Express'}); this is the old line
  res.sendFile('index.html');
});

module.exports = router;

【讨论】：

@RaslanDyab 嗯，您确定您的控制台或终端中没有错误日志吗？ app.set('views', __dirname + '/views'); 和 app.use(express.static(__dirname + '/public')); 之间可能存在冲突