React-серверный обработчик событий рендеринга не связан с

3

На стороне клиента у меня была следующая маршрутизация в 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>
....

Запущенный сервер успешно загрузил как страницы индекса, так и логин. Тем не менее кнопка отправки не работала в форме входа. Другими словами, прослушиватель событий не был прикреплен на стороне клиента.

Я что-то неправильно делаю? Спасибо.

Теги:
express
react-router

1 ответ

0

Используйте эту библиотеку https://github.com/gaearon/react-hot-loader, если вы используете webpack, в этом репозитории остается ссылка на эту dpendency.

Причины? сторона клиента/сервера должна отображаться один за другим.

сервер отображает только HTML и клиентский код всего js-кода, а затем реагирует на обнаружение интеллекта. Есть реагирующие компоненты, которые на самом деле были визуализированы (cus на стороне сервера работает софт), а затем обновлять с помощью необходимых, теперь вы можете взаимодействовать с

  • 0
    это только для развития, но не может использовать производство

Ещё вопросы

Сообщество Overcoder
Наверх
Меню