React Router nicht wie erwartet auf dem Server gerendert

Question

Ich versuche, reagieren Rendern auf einem PHP-Server mit php-V8Js.

Einzelne Komponenten rendern gut, aber ich habe Probleme beim Rendern von Kindern mit <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}/>)); 
    }) 
} 

Die Quelle html diese an den Client sendet, ist:

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

Es ist nicht mit einem der beiden HTML-Komponenten.

Wenn ich auslagern <RouterContext/> für <About /> oder <Master /> die html für entweder gerendert werden, aber wenn RouterContext Verwendung es macht nur den Root-Tag der einzelnen Komponenten.

Irgendwelche Ideen, was ich falsch mache?

Answer 1

Das Problem liegt daran, dass Sie 'Master' und 'About' als Zeichenfolgen übergeben, sodass React nur neue leere Elemente erstellt. Sie benötigen Master und About als Variablen verwenden, die Sie oben importiert:

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

Upboats zu Brad, ich glaube, mit NodeJS gehen würde zu dem besten Weg sein, ist es besser unterstützt und verwendet V8 ohnehin werden soll.

Answer 2

Ich vermied php-V8Js wie die Pest. Stattdessen folgte ich Airbnbs Beispiel The Evolution of Airbnb’s Frontend. Im Grunde installieren Sie einfach Node auf Ihrem Server und verwenden so etwas wie Guzzle, um eine HTTP-Anfrage an den lokalen Node-Server zu senden. Senden Sie Ihre PHP-Daten über eine POST-Anfrage an localhost: 3000 oder was auch immer. Dann müssen Sie nur dem React Router docs folgen, um das serverseitige Rendering einzurichten.

Ich spreche ein wenig darüber, wie ich dieses Problem behandelt here.