我正在尝试使用 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);
});
我在运行 node --harmony app.js
时遇到的错误是
serverHtml: renderToString(<RoutingContext {...renderProps} />)
^
SyntaxError: Unexpected token <
at exports.runInThisContext (vm.js:73:16)
at Module._compile (module.js:443:25)
at Object.Module._extensions..js (module.js:478:10)
at Module.load (module.js:355:32)
at Function.Module._load (module.js:310:12)
at Function.Module.runMain (module.js:501:10)
at startup (node.js:129:16)
at node.js:814:3
我是否需要安装/转换(babelify/jsx)我的代码来处理 JSX 样式标签?但是我在网上的任何教程中都没有找到这样的说法。
我关注的资源
最佳答案
注意 - 此方法已弃用。那里有更好的选择。如前所述,require('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);
});
谢谢:)
关于javascript - 语法错误 : Unexpected token < while using renderToString(<RoutingContext {. ..renderProps}/>,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34074064/