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 <'（）

回答

相關問題