3

我正在尝试使用 react-router 进行服务器端渲染，但最终还是失败了。react-router 的<Handler />火中没有点击处理程序，但生命周期事件，例如componentDidMountdo。

服务器接收到一个请求，通过 react-router 运行它并输出 HTML：

路由.js

var routes = (
    <Route handler={App}>
        <Route name='page' handler={Page} path='/page' />
        <Route name='other' handler={Other} path='/other' />
    </Route>
);

服务器.js

var App = React.createClass({
    render: function () {
        return (
            <div>
                <RouteHandler />
            </div>
        )
    }
});

索引.jade

extends layout
block content
  div#app!= markup
  div#test!= test

您可以看到这里有 2 个React组件；content（来自 react-router 的结果视图）和test（带有 onClick 的简单按钮）

在客户端上加载 HTML 后，我的client.js脚本就会运行，它可以React检查并绑定到组件：

function run(){
    Router.run(routes, Router.HistoryLocation, function (Handler, state) {
        React.render(<Handler />, document.getElementById('app'));
        React.render(<Test />, document.getElementById('test'));
    });
}
run();

问题是没有任何onClick处理程序为内部的任何组件运行<Handler />，包括react-router组件<Link />。然而<Test /> ，火完全没问题。

这是其中一个页面的标记<Handler />：

var Page = React.createClass({
    componentDidMount:function(){
      window.setTimeout(function(){
          //The runs fine
          console.log('component has connect properly');
      },500);
    },
    render: function () {
        return (
            <div>
                <h1 onClick={this.test}>Page</h1>
                <Link to='other' >Other</Link>
                <button onClick={this.alertIt}>Alert</button>
            </div>
        )
    },
    test:function(){
        console.log('testing');
    },
    alertIt: function () {        
        alert('Page');
    }
});

这是工作<Test />组件：

var Test = React.createClass({
    render: function () {
        return (
            <div>
                <button onClick={this.test}>Test</button>
            </div>
        )
    },
    test:function(){
        alert('testing');
    }
});

更新 1

即使我删除服务器端渲染并<Handler />在客户端上渲染，问题仍然存在。

更新 2

上面的页面示例在父组件中呈现：

var App = React.createClass({
    render: function () {
        return (
            <div>
                <RouteHandler />
            </div>
        )
    }
});

更新 3

我在没有使用Browserify、React和react-router作为全局对象的情况下复制了它，它工作得非常好......

解决方案 A

通过添加browserify-shim到我的构建过程并将其设置为使用React和react-router从它的window而不是node_modules它的工作。这不是最干净的解决方案，但仍然很好地适合同构的东西。我仍然想知道为什么使用Reactfromnode_modules会导致这个问题。

browserify-shim 配置：

"browserify": {
    "transform":[
      "browserify-shim"
    ]
  },
  "browserify-shim": {
    "React": "global:React",
    "react-router": "global:ReactRouter"
  }

更新 4

在玩了一些之后，似乎只有react-router它不能很好地与Browserify. 简单React且Browserify工作正常。

4

0 回答 0