javascript - React 路由器未在服务器上按预期呈现

Question

我正在尝试使用 php-V8Js 在 PHP 服务器上进行 react 渲染.

单个组件渲染良好，但我在使用 <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 组件。

如果我换出 <RouterContext/>对于 <About />或 <Master />呈现其中任何一个的 html，但是当使用 RouterContext 时，它只呈现每个组件的根标记。

知道我做错了什么吗？

Answer 1

我像避开瘟疫一样避开 php-V8Js。相反，我遵循了 Airbnb 的例子 The Evolution of Airbnb’s Frontend .基本上，只需在您的服务器上安装 Node 并使用类似 Guzzle 的东西向本地节点服务器发出 HTTP 请求。通过 POST 请求将您的 PHP 数据发送到 localhost:3000 或其他任何地方。然后你所要做的就是按照React Router docs设置服务器端渲染。

我谈谈我是如何处理这个问题的here .