javascript - React/Express - 'Unexpected token <' 调用 renderToString()

Question

我正在为我的 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 组件...我缺少什么？

Answer 1

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