我正在为我的 React/Express 应用程序设置服务器端渲染,但遇到与调用 react-dom/server
相关的语法错误。 renderToString()
方法。我正在大致遵循本教程 - http://crypt.codemancers.com/posts/2016-09-16-react-server-side-rendering/
index.js
(表达应用程序根):
'use strict'
require('babel-register')({
presets: ['es2015', 'react']
});
const express = require('express')
const path = require('path')
const app = express()
const React = require('react')
const reactDomServer = require('react-dom/server')
const routes = require('./src/routes.jsx')
const reactRouter = require('react-router')
let { match, RouterContext } = reactRouter
app.get('*', (req, res) => {
match({ routes: routes, location: req.url }, (err, redirect, props) => {
const appHtml = reactDomServer.renderToString(<RouterContext {...props}/>)
res.send(renderPage(appHtml))
})
})
但是,这会导致错误:
const appHtml = reactDomServer.renderToString(<RouterContext {...props}/>)
^
SyntaxError: Unexpected token <
我见过的所有类似示例都直接插入了 JSX 组件...我缺少什么?
最佳答案
babel-register
不处理调用它的文件,请参阅 https://stackoverflow.com/a/29425761/1795821
您需要将调用的 app.get()
放入另一个文件中,或者使用不同的方法加载 Babel。
因此创建一个新的 renderReact.js
文件
module.exports = function(app) {
app.get('*', (req, res) => {
match({ routes: routes, location: req.url }, (err, redirect, props) => {
const appHtml = reactDomServer.renderToString(<RouterContext {...props}/>)
res.send(renderPage(appHtml))
})
})
}
然后回到您的 index.js
中执行此操作
let renderReact = require('./renderReact.js');
renderReact(app);
关于javascript - React/Express - 'Unexpected token <' 调用 renderToString(),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44961697/