React/Express - renderToString（）の呼び出しで '予期しないトークン<'が発生しました

Question

私はReact/Expressアプリケーションのサーバーサイドレンダリングを設定しようとしていますが、 react-dom/serverrenderToString()メソッド。私は緩くこのチュートリアル以下のよ - http://crypt.codemancers.com/posts/2016-09-16-react-server-side-rendering/

index.js（エクスプレスアプリのルート）：

const appHtml = reactDomServer.renderToString(<RouterContext {...props}/>) 
              ^
SyntaxError: Unexpected token < 

私がきた同様の例のすべて：しかし

'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)) 
    }) 
}) 

を、これはエラーが発生します真っ直ぐなJSXコンポーネントがドロップされているのを見ました...私は何が欠けていますか？

Answer 1

babel-registerは、それが呼び出されたファイルを処理https://stackoverflow.com/a/29425761/1795821

あなたは別のファイルに呼ばれるapt.get（）を入れ、またはロードバベルの異なる方法を使用する必要があります表示されません。

ので、あなたに感謝し、素晴らしいことだその代わり

let renderReact = require('./renderReact.js'); 
renderReact(app); 

Answer 2

この問題は、babel-registerが必要なのは、インポートするファイルでは機能しませんが、後でインポートするファイルでは問題になると思います。したがって、のJSX構文はrenderToStringメソッドでは選択されません。とにかく私にはまったく感じられなかった文法のためにこれは前に、そしてbabel-registerを含めて私に起こった。

私が個人的にやったことは他にもたくさんあります：readDomServer.renderToString(React.createElement(RoutingContext, props))createElementをReactで使用すると、同じことを達成できます。これはあなたの問題を解決します。