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。

如果我为<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。

Answer 2

问题是因为您将'Master'和'About'作为字符串传递，因此React只会创建新的空元素。您需要将Master和About用作上面导入的变量：

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

升级到布拉德，我认为使用Nodejs也是最好的路线，应该更好地支持并使用V8。

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

2 个答案: