1

同形アプリを作成するために、サーバー側とクライアント側の両方のルーティングに反応ルーターを使用しています。サーバーのルーティングは正常に機能し、データを正常に取得できますが、クライアントでは、最初にクリックしたリンクで、URL の変更時に react-router のコールバックが呼び出されます。その後のクリックでは、何らかの理由でコールバックがトリガーされません。

//server.js
ReactRouter.run(mainApp.getComponent(), req.path, function (Root, state) {
//if no matching routes found, then go to 404
if (state.routes.length === 0) {
  res.status(404);
}

var RootComponent = fluxibleAddons.provideContext(Root, {
  getStore : React.PropTypes.func.isRequired,
  executeAction : React.PropTypes.func.isRequired
});

var loadAction = state.routes[1].handler.loadAction;
var renderReactOnServer = function () {
    var markup = React.renderToString(React.createElement(RootComponent, React.__spread({}, state, { context : context.getComponentContext()  }) ));
    res.expose(mainApp.dehydrate(context), mainApp.uid);

    console.log("Rendering Server React Components");
  res.render("index", {
    main: markup,
    uid: mainApp.uid
  }, function (err, markup){
    if (err) {
      next(err);
    }
    res.send(markup);
  });
};

if (loadAction){
  context.getActionContext().executeAction(loadAction, { params: state.params, query: state.query }, renderReactOnServer);
} else {
  renderReactOnServer();
}

サーバーで反応ルーターのメイン実行メソッドを実行しています。

クライアントで私は以下を実行しています

Router.run(app.getComponent(), Router.HistoryLocation, function (Root, state) {
        var RootComponent = fluxibleAddons.provideContext(Root,{
            getStore : React.PropTypes.func.isRequired,
            executeAction: React.PropTypes.func.isRequired
        });
        React.render(React.createElement(RootComponent, React.__spread({}, state, { context : context.getComponentContext()  })), document.getElementById(app.uid));
 });

私の client.js では、react ルーターの実行のコールバックが 1 回だけ呼び出されますが、これは私には奇妙です。目に見えるエラーはありません。誰でもアイデアはありますか?

4

0 に答える 0