Routing with Express when using React

Question

I want to set the routes for my web app using Express, and I'm also using React to handle the front end. The problem is that I don't understand how to route things properly when using React components.

I have in my index.html:

<script> document.getElementById("input").onchange = function() {  ...  } </script>

And my App.js:

class App extends Component {
    render() {
        return ( <div><input id="input" /></div> );
    }

}

And router.js:

app.get('/', function (req, res) {
    res.sendFile(path.resolve('public/index.html'))
})
app.use(express.static('static'));
app.listen(3001, function () {
  console.log('Example app listening on port 3001!')
})

And static/index.js:

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

The problem is that I'm getting "Cannot set property 'onchange' of null". Obviously the App object was not rendered, but I don't understand why. How can I make this work?

can wrap your script code inside a function passed to `window.onload` — Amr Labib, Nov 15 '17 at 21:11
After the page loads, what does `document.getElementById("input")` return in the browser console? — rishat, Nov 15 '17 at 21:19

andrewgi · Answer 1 · 2017-11-15T21:24:12.620

0

I believe you need the express router

Differences between express.Router and app.get?

var express = require('express');
var path = require('path');
var router = express.Router();

router.get('/', function(req, res) {
    res.sendFile(path.join(__dirname), '../public/index.html');
});

edited Nov 15 '17 at 21:24

answered Nov 15 '17 at 21:16

andrewgi

620
1
7
22

score 0 · Answer 2 · answered Nov 15 '17 at 22:01

Try two things:

Remove the document.getElementById("input").onchange inside of the script tag and instead put console.log('I am running the script tag')
Put a console.log('I am rendering the App via react' inside of yourrendermethod, right abovereturn`.

I am imagining that the script tag gets "evaluated" before react has done anything with the DOM, causing document.getElementById to not return anything, hence your null.

If this is true, you will see your I am running the script tag before your see I am rendering the App.

Routing with Express when using React

2 Answers2