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

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

Answer 2

我认为问题源于这样一个事实：要求babel-register对您导入的文件不起作用，但对于之后导入的文件不起作用。因此<RouterContext方法不会选择renderToString的JSX语法。这种情况在我之前发生过，包括babel-register，因为语法对我来说从未感到干净。

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

React / Express - '意外的令牌＆lt;'调用renderToString（）

2 个答案: