React/Express - 调用renderToString()时出现'意外的标记<'

Question

我正在为我的React/Express应用程序设置服务器端呈现,但是我遇到了与该react-dom/server renderToString()方法调用相关的语法错误.我正在松散地遵循这个教程 - http://crypt.codemancers.com/posts/2016-09-16-react-server-side-rendering/

index.js (Express app root):

'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组件掉进了......我错过了什么？

Answer 1

我相信这个问题源于这样一个事实，即 requirebabel-register不适用于您导入的文件，但适用于之后导入的文件。<RouterContext因此该方法不会采用JSX 语法renderToString。这以前发生在我身上，包括babel-register语法对我来说从来都没有感觉干净。

我个人和许多其他人所做的都是这样的：readDomServer.renderToString(React.createElement(RoutingContext, props))使用createElementReact 中的方法，你可以完成同样的事情。这将解决您的问题。

Answer 2

babel-register不会处理调用它的文件,请参阅/sf/answers/2059803301/

您需要将apt.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);