На стороне клиента у меня была следующая маршрутизация в 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>
....
)
}
Запуск приложения на стороне клиента не вызвал проблем, событие отправки было успешно запущено. Клиентская сторона script связана с 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>
....
Запущенный сервер успешно загрузил как страницы индекса, так и логин. Тем не менее кнопка отправки не работала в форме входа. Другими словами, прослушиватель событий не был прикреплен на стороне клиента.
Я что-то неправильно делаю? Спасибо.
Используйте эту библиотеку https://github.com/gaearon/react-hot-loader, если вы используете webpack, в этом репозитории остается ссылка на эту dpendency.
Причины? сторона клиента/сервера должна отображаться один за другим.
сервер отображает только HTML и клиентский код всего js-кода, а затем реагирует на обнаружение интеллекта. Есть реагирующие компоненты, которые на самом деле были визуализированы (cus на стороне сервера работает софт), а затем обновлять с помощью необходимых, теперь вы можете взаимодействовать с