同形アプリを作成するために、サーバー側とクライアント側の両方のルーティングに反応ルーターを使用しています。サーバーのルーティングは正常に機能し、データを正常に取得できますが、クライアントでは、最初にクリックしたリンクで、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 回だけ呼び出されますが、これは私には奇妙です。目に見えるエラーはありません。誰でもアイデアはありますか?