React server side play event listener not attached

On the client side, I had the following routing to index.js

:

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

      

where App and Login are 2 React components. The login element has an onSubmit event on the form.

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

      

Launching the application on the client side did not cause problems, the submit event was fired successfully. The client-side script is linked to static/js/bundle.js

.

Now I wanted to do server side rendering with nodejs and express, so the server was created as shown below.

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

is defined below (skipping the import part):

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

      

And it is login.js

defined in a similar way (omitting the import part):

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

      

where server-side rendering uses hbs as template engine and template file is index.html:

.....
<div id="root">{{{ html }}}</div>
<script src="static/js/bundle.js"></script>
....

      

The running server successfully loaded both index pages and login. However, the submit button did not work on the login form. In other words, no event listener was attached on the client side.

Am I doing something wrong? Thank.

+3


source to share


1 answer


Use this library https://github.com/gaearon/react-hot-loader if you are using webpack, this dpendency remains in this repository.

The reasons? client / server side should render one by one.



the server only renders HTML and client-side code of all js code and then react to intelligence detection. There are reactive components that have actually been rendered (cus on the server side running software) and then update with the needed ones, now you can interact with

0


source







All Articles