React/Express - 在调用renderToString（）时出现'Unexpected token <'（）

我正在为我的React/Express应用程序设置服务器端渲染，但遇到与调用相关的语法错误react-dom/serverrenderToString()方法。我松散下面这个教程 - http://crypt.codemancers.com/posts/2016-09-16-react-server-side-rendering/React/Express - 在调用renderToString（）时出现'Unexpected token <'（）

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组件丢在...我错过了什么？

来源

2017-07-07 skwidbreth

babel-register不处理它是从所谓的文件，请参阅https://stackoverflow.com/a/29425761/1795821

你需要把apt.get（）呼吁到另一个文件，或使用装载通天的不同方法。

所以制作一张新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);

来源

2017-07-07 03:13:28

我认为这个问题源于这样一个事实，即要求babel-register不适用于您导入它的文件，而是适用于之后导入的文件。因此方法不会拾取<RouterContext的JSX语法。无论如何，这在我之前发生过，包括babel-register，因为语法永远不会对我感觉干净。

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

来源

2017-07-07 03:08:26

那太好了，谢谢！我接受了另一个答案，因为它专门解决了'babel-register'的正确行为，但这也是一个很好的答案，我可能会在我的实际应用中使用这个答案。 – skwidbreth

没问题@skwidbreth很高兴你找到了解决方案。 –

React/Express - 在调用renderToString（）时出现'Unexpected token <'（）

回答

相关问题