javascript - サーバー側の ReactJS アプリがクライアント側に応答できるようにする

Question

サーバー側で ReactJS を正常に動作させることができましたが、クライアント側で応答するように頭を悩ませています。

すべてをオンにする必要があるように。私はajaxなどを介してデータを取得していません。データはコンポーネント自体のJSONにあります。

テキストによるアドバイスはたくさんありますが、それを機能させるための正確なコードはありません。また、反応ルーターを使用しています。

---

追加の背景として、commonJS と grunt を使用してコンパイルしています。コンパイルした JS を html ファイルに含めます。ボタンなどをクリックしても何も起こりません。

サーバ：

var React = require('react');
var Router = require('react-router');
var Express = require('express');
var fs = require('fs');

var routes = require('./src/routes');

var app = Express();

app.use('/dist', Express.static(__dirname + '/dist'));

app.use(function (req, res) {
    // pass in `req.url` and the router will immediately match
    Router.run(routes, req.url, function (Handler) {
        var content = React.renderToString(React.createElement(Handler, null));
        var index = fs.readFileSync('index.html', {encoding: 'utf8'});
        res.send(index.replace('%%%content%%%', content));
    });
});

var server = app.listen(9001, function () {
    var host = server.address().address
    var port = server.address().port
    console.log('Example app listening at http://%s:%s', host, port)
})

ルーター:

var React = require('react');
var Router = require('react-router');
var Route = Router.Route;
var DefaultRoute = Router.DefaultRoute;

//TODO: dynamically load each route somehow...
var App = require('./app');
var Home = require('./home');
var ItemInstance = require('./item-instance');
var Todo = require('./todo');
var Task = require('./task');
var Project = require('./project');
var Workspace = require('./workspace');

var routes = (
    <Route name="index" path="/" handler={App}>
        <Route name="home" path="/home" handler={Home} />
        <Route name="workspace" path="/workspace" handler={Workspace} />
        <Route name="instanceitem" path="/:tag/:id" handler={ItemInstance} />
        <DefaultRoute handler={Home}/>
    </Route>
);

module.exports = routes;