没有附加React服务器端呈现事件侦听器

Question

在客户端，我在index.js有以下路由：

ReactDOM.render(
    <Router history={browserHistory}>
        <Route path="/" component={App}/>
        <Route path="/login" component={Login}/>
    </Rouuter>
)

App和Login是2个React组件。 登录组件在表单上有一个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和express进行服务器端渲染，因此创建了一个服务器，如下所示。

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>
....

运行服务器成功加载了索引和登录页面。 但是，提交按钮在登录表单上不起作用。 换句话说，事件侦听器未附加在客户端。

我做错了吗？ 谢谢。

Answer 1

如果您使用webpack，请使用此库https://github.com/gaearon/react-hot-loader ，在此存储库中保留指向该dpendency的链接。

原因是什么？ 客户端/服务器端需要逐个呈现。

服务器只渲染HTML，并拥有所有逻辑js代码，然后反应智能检测有一个实际呈现的反应组件（cus服务器端运行firts），然后用必要的更新，现在你可以与