Javascript 语法错误：意外标记<；使用RenderString（<；RoutingContext{…RenderOps}/>；

我正在尝试使用React&React router进行服务器端渲染。到目前为止，这只是来自不同来源的复制粘贴代码。但当我尝试使用node运行应用程序时，遇到语法错误（不是运行时错误）。下面是代码

App.js

'use strict';
require('babel/register');

const express        = require('express');
const http           = require('http');
const handlebars     = require('express-handlebars');
const renderToString = require('react-dom').server;
const match          = require('react-router').match;
const RoutingContext = require('react-router').RoutingContext;
const Routes         = require('./routes');
const app            = express();
var server;

// JSX transpilation
require('node-jsx').install();

// Setting up handlebars
app.engine('.hbs', handlebars({
    extname: '.hbs',
    layoutsDir: 'views/server',
    partialsDir: 'views/server/partials'
}));

app.set('view engine', '.hbs');

// Mount Routes
app.use('*', function (req, res) {
    match({routes: routes, location: req.url}, (error, redirectLocation, renderProps) => {
        if (error) {
          res.status(500).send(error.message)
        } else if (redirectLocation) {
          res.redirect(302, redirectLocation.pathname + redirectLocation.search)
        } else if (renderProps) {
            console.log(renderProps);
            var pageData = {
                serverHtml: renderToString(<RoutingContext {...renderProps} />)
            };
            console.log(pageData);
            res.render('base', pageData);
        } else {
          res.status(404).send('Not found')
        }
    });
});

server = http.createServer(app);

server.listen('3000', () => {
    console.log('Express server listening on port ' + 3000);
});

我需要安装/转换（babelify/jsx）我的代码来处理jsx样式的标记吗？但是我在任何在线教程中都没有找到这样的东西

我跟踪的资源

---

你所做的不会起作用，因为

require('node-jsx').install();

安装一个require钩子来传输需要的文件

正如其他人所建议的，这个项目已经被弃用，使用巴贝尔是现在最好的方法

您必须将jsx保存在单独的模块中，并从主文件中获取它

这是因为

JSX

文件在到达javascript解释器之前必须解析并转换为标准javascript。在这种特定情况下，它是通过截取公共js运行时提供的

require

方法来完成的

但是，包含

require（'babel/register'）

的文件不能包含JSX语法，因为要进行注册，该文件必须由javascript解释器运行，并且必须首先解析该文件。此初步步骤将失败，因为javascript解释器无法识别JSX标记

---

此外，如果您使用的是最新版本的Babel，您将不得不使用。

注意-此方法已被弃用。还有更好的替代方法。如前所述，

需要（'node-jsx'）。install（）

不再维护，使用Babel是向前发展的理想方式。

因此，我通过对上述代码进行一些更改来解决这个问题

我删除了以下行，因为它不是必需的

require('babel/register');

然后，我没有通过babel传输app.js，而是用React.createElement（）更改了JSX标记，如下所示：

//serverHtml: renderToString(<RoutingContext {...renderProps} />)
serverHtml: ReactDOM.renderToString(React.createElement(RoutingContext, renderProps))

'use strict';

const compression    = require('compression');
const express        = require('express');
const http           = require('http');
const handlebars     = require('express-handlebars');
const path           = require('path');
const React          = require('react');
const ReactDOM       = require('react-dom/server'); // Fixed this
const match          = require('react-router').match;
const RoutingContext = require('react-router').RoutingContext;
const app            = express();
var server;

require('node-jsx').install(); // Not required if you convert the below './routes' file from JSX into js
const Routes = require('./routes');

// Used for Gzipping all the resources
app.use(compression());

// Setting up handlebars
app.engine('.hbs', handlebars({
    extname: '.hbs',
    layoutsDir: 'views/server',
    partialsDir: 'views/server/partials'
}));

app.set('view engine', '.hbs');

// Set path to public assets
app.use(express.static(path.join(__dirname, 'public')));

// Mount Routes
app.use('*', function (req, res) {
    match({routes:Routes, location:req.url}, (error, redirectLocation, renderProps) => {
        if (error) {
          res.status(500).send(error.message)
        } else if (redirectLocation) {
          res.redirect(302, redirectLocation.pathname + redirectLocation.search)
        } else if (renderProps) {
            var pageData = {
                serverHtml: ReactDOM.renderToString(React.createElement(RoutingContext, renderProps))
            };

            res.render('base', pageData);
        } else {
          res.status(404).send('Not found')
        }
    });
});

server = http.createServer(app);

server.listen('3000', () => {
    console.log('Express server listening on port ' + 3000);
});

---

谢谢：）

是的，您必须将JSX转换为标准JS代码。JSX不是ECMAScript标准。你是说实时传输此代码并运行吗？像巴别塔节点之类的？虽然可以使用

babel节点

进行开发，但没有教程提到服务器端渲染。对于生产，在以前使用工具编译代码，比如

react tools

。我添加了

require（'node-jsx

）。install（）`但仍然没有效果。我还添加了

require（babel/register）

。摘自以下链接&stackoverflow.com/questions/30626410/使用react-react路由器和express？rq=1进行服务器端渲染。我还是不明白。你是说我必须使用babelify

app.js

？我确实在顶部使用了

require（'babel/register'）

。我关注这篇文章stackoverflow.com/questions/30626410/server-side-rendering-with-react-react-router-and-expresI更新了答案，并提供了更多解释。如果还有些混乱，请告诉我。谢谢。我已经解决了这个问题。我使用的是

React.createElement（RoutingContext，RenderOps）

而不是JSX标记。这解决了问题：）

'use strict';

const compression    = require('compression');
const express        = require('express');
const http           = require('http');
const handlebars     = require('express-handlebars');
const path           = require('path');
const React          = require('react');
const ReactDOM       = require('react-dom/server'); // Fixed this
const match          = require('react-router').match;
const RoutingContext = require('react-router').RoutingContext;
const app            = express();
var server;

require('node-jsx').install(); // Not required if you convert the below './routes' file from JSX into js
const Routes = require('./routes');

// Used for Gzipping all the resources
app.use(compression());

// Setting up handlebars
app.engine('.hbs', handlebars({
    extname: '.hbs',
    layoutsDir: 'views/server',
    partialsDir: 'views/server/partials'
}));

app.set('view engine', '.hbs');

// Set path to public assets
app.use(express.static(path.join(__dirname, 'public')));

// Mount Routes
app.use('*', function (req, res) {
    match({routes:Routes, location:req.url}, (error, redirectLocation, renderProps) => {
        if (error) {
          res.status(500).send(error.message)
        } else if (redirectLocation) {
          res.redirect(302, redirectLocation.pathname + redirectLocation.search)
        } else if (renderProps) {
            var pageData = {
                serverHtml: ReactDOM.renderToString(React.createElement(RoutingContext, renderProps))
            };

            res.render('base', pageData);
        } else {
          res.status(404).send('Not found')
        }
    });
});

server = http.createServer(app);

server.listen('3000', () => {
    console.log('Express server listening on port ' + 3000);
});