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

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-V8J。相反，我按照 Airbnb 的示例 The Evolution of Airbnb’s Frontend. Basically, just install Node on your server and use something like Guzzle to do an HTTP request to the local Node server. Send your PHP data over a POST request to localhost:3000 or whatever. Then all you have to do is follow the React Router docs 来设置服务器端渲染。

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

Answer 2

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

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

向 Brad 致敬，我认为使用 Nodejs 也是最好的途径，它应该得到更好的支持并且无论如何都使用 V8。

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

React router not rendering as expected on the server

javascript

reactjs

react-router