3
に添付されていない反応して、私はindex.jsで次のルーティングを持っていた：は、サーバー側レンダリングイベントリスナーは、クライアント側で
ReactDOM.render(
<Router history={browserHistory}>
<Route path="/" component={App}/>
<Route path="/login" component={Login}/>
</Rouuter>
)
。ログインコンポーネントのフォームにonSubmitイベントがあります。
export default Login extends React.Component {
constructor() {
.....
this.auth = this.auth.bind(this);
}
auth(e) {
.....
}
render() {
return (
....
<form method="post" onSubmit={this.auth}>
....
<input type="submit" value="Log In"/>
</form>
....
)
}
クライアント側でアプリケーションを実行しても問題は発生しませんでした。送信イベントは正常に発生しました。クライアント側スクリプトはstatic/js/bundle.jsにバンドルされています。
今、私はnodejsで表現して表現したいので、以下のようにサーバーを作成しました。
const express = require('express');
const router = express.router();
var app = express()
const login = require('./routes/login')
const index = require('./routes/index')
app.use('/login', login);
app.use('/', index);
.....
index.js（インポート部分をスキップする）以下のように定義される：
....
const express = require('express');
const router = express.router();
router.get('/', (req, res) => {
const el = React.createElement(App);
const html = ReactDOMServer.renderToString(el);
res.render('index', { html, title: 'Portal' });
})
module.exports = router
そしてlogin.jsを（インポート部分をスキップ）と同様に定義される：
....
const express = require('express');
const router = express.router();
router.get('/', (req, res) => {
const el = React.createElement(Login);
const html = ReactDOMServer.renderToString(el);
res.render('index', { html, title: 'Portal' });
})
module.exports = router
hbsをテンプレートエンジンとして使用し、テンプレートファイルはindex.htmlです：
.....
<div id="root">{{{ html }}}</div>
<script src="static/js/bundle.js"></script>
....
実行中のサーバーで、インデックスページとログインページの両方が正常に読み込まれました。ただし、ログインフォームで送信ボタンが機能しませんでした。言い換えると、イベントリスナーはクライアント側には接続されていませんでした。
私は間違って何かしますか？ありがとう。