Question

我正在使用React和node.js构建一个MVC Express应用程序。我在公用文件夹中有index.html，在views文件夹中有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')
);

routers / 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;

Answer 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;

react应用程序未在Express中呈现react组件

1 个答案: