サーバでレンダリングされていないリアクタルータ

Question

php-V8Jsを使用して、PHPサーバでリアクションレンダリングを実行しようとしています。

単一のコンポーネントはうまく描画されますが、<RouterContext />を使用して子をレンダリングする際に問題があります。

<?php 
    $v8js = new V8Js(); 
    ob_start(); 
    $v8js->executeString(file_get_contents(PUBLIC_PATH . '/js/bundle.js'), 'v8.js'); 
    $content = ob_get_clean(); 
    echo $content; 

App.jsx（bundle.js）

import React from 'react' 
import { render } from 'react-dom' 
import { Router, Route, Link, browserHistory, IndexRoute, match, RouterContext } from 'react-router' 

import Master from './views/Master.jsx'; 
import About from './views/About.jsx'; 

var routes = { 
    path: '/', 
    component: 'Master', 
    indexRoute: { 
     component: 'About' 
    } 
} 

if (typeof document === 'undefined'){ 
    match({ 
      routes, 
      location: '/' 
     }, 
     function(error, redirectLocation, renderProps) { 
      print(React.renderToString(<RouterContext {...renderProps}/>)); 
    }) 
} 

これがクライアントに送信元のHTMLは次のとおりです。

<Master data-reactid=".1dpk2jzhts0" data-react-checksum="2085756513"> 
    <About data-reactid=".1dpk2jzhts0.0"></About> 
</Master> 

それはどちらかのコンポーネントのHTMLのいずれかを含めていません。

Iは<About />又は<Master />レンダリングされるいずれかのHTMLのため<RouterContext/>をスワップアウトが、RouterContextを使用する場合は、各コンポーネントのルートタグをレンダリングする場合。

私が間違っていることは何ですか？

Answer 1

'Master'と'About'を文字列として渡すので、Reactは新しい空の要素を作成するだけです。あなたは上記のインポート変数としてごMasterとAboutを使用する必要があります。

var routes = { path: '/', component: Master, indexRoute: { component: About } } は

ブラッドにUpboats、私はNodejsに行くことあまりにも最適なルートになると思い、それがより良いサポートと、とにかくV8を使用する必要があります。

Answer 2

私は疫病のようなphp-V8Jを避けました。代わりに、私はAirbnbの例The Evolution of Airbnb’s Frontendに従った。基本的には、サーバにNodeをインストールし、Guzzleのようなものを使用して、ローカルノードサーバへのHTTP要求を行います。 localhost：3000などのPOSTリクエストでPHPデータを送信します。次に、React Router docsに従って、サーバー側のレンダリングをセットアップするだけです。

私はこの問題をどのように処理したかについて少し話しますhere。