title: React JS and Express POST route not found 404
body: <p>My problem is I am trying to add an edit function to my project. I have added in a <code>/edit</code> router to my classroom.js file and I go to edit the flag through the app and I get <code>POST /classroom/edit 404 398.484 ms - 1355</code> in my console log. In the browsers console log I get:</p>
  
  <pre><code>App.js:32 POST http://localhost:3002/classroom/edit 404 (Not Found)
  App.js:52 Error: Bad response from server
      at App.js:40
  </code></pre>
  
  <p><strong>React: App.js</strong></p>
  
  <pre><code>import React, { Component } from 'react';
  import './App.css';
  
  class App extends Component {
  
    constructor(props) {
      super(props);
      this.state = {
        toggle: false,
        toggleIdx: 0,
        classroom: [],
        flagreason: '',
        msg: ''
      };
      this.eventHandler = this.eventHandler.bind(this);
      this.logChange = this.logChange.bind(this);
      this.handleEdit = this.handleEdit.bind(this);
    }
  
    logChange(e) {
      this.setState({
        [e.target.name]: e.target.value
      });
    }
  
    handleEdit(event) {
      event.preventDefault()
      var data = {
        flagreason: this.state.flagreason,
        id: this.state.toggleIdx
      }
      fetch("/classroom/edit", {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(data)
      }).then(function(response) {
        if (response.status &gt;= 400) {
          throw new Error("Bad response from server");
        }
        return response.json();
      }).then(function(data) {
        console.log(data)
        if (data === "success") {
          this.setState({
            msg: "Flag Reason has been edited."
          });
          console.log('Successful Update!');
        }
      }).catch(function(err) {
        console.log(err)
      });
    }
  
    eventHandler(event, idx) {
      this.setState((prevState) =&gt; ({
          toggle: !prevState.toggle,
          toggleIdx: idx
        })
      );
    }
  
    componentDidMount() {
      fetch("/classroom")
      .then(res =&gt; res.json())
      .then(classroom =&gt; this.setState({ classroom }))
    }
  
    render() {
      return (
        &lt;div className="App"&gt;
                  &lt;div className="wrapper"&gt;
                      &lt;h1&gt;Classroom&lt;/h1&gt;
                      {this.state.classroom.map((classroom, idx) =&gt;
                          &lt;div className="child" key={classroom.id}&gt;
                &lt;p className="detail"&gt;Child's Name: &lt;span className={classroom.childflagged}&gt;{classroom.childsname}&lt;/span&gt; &lt;i title={classroom.flagreason} className={'fa fa-flag flag' + classroom.childflagged}&gt;&lt;/i&gt;&lt;i title={classroom.starreason} className={'fa fa-star star' + classroom.starstudent}&gt;&lt;/i&gt;&lt;/p&gt;
                &lt;p className="detail"&gt;Parent's Phone Number: {classroom.parentsnumber}&lt;/p&gt;
                &lt;div className="actionMenu"&gt;
                  &lt;button className="flags" id={classroom.id} onClick={e =&gt; this.eventHandler(e, idx)}&gt;Edit Flags&lt;/button&gt;
                  &lt;button className="results"&gt;View Results&lt;/button&gt;
                  &lt;button className="profile"&gt;View Profile&lt;/button&gt;
                &lt;/div&gt;
                &lt;div className="actionForm"&gt;
                  &lt;div&gt;
                    &lt;form id={"flagform" + classroom.id} className={(this.state.toggle &amp;&amp; (this.state.toggleIdx === idx)) ? '' : 'hide'} onSubmit={this.handleEdit} method="post" autoComplete="no"&gt;
                      &lt;input type="hidden" name="id" value={classroom.id} /&gt;
                      &lt;input type="text" onChange={this.logChange} value={this.state.flagreason} name="flagreason" placeholder="Reason For Flag" /&gt;
                      &lt;input type="submit" name="submit" value="Save Changes" /&gt;
                    &lt;/form&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            )}
                  &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default App;
  </code></pre>
  
  <p><strong>Express: app.js</strong></p>
  
  <pre><code>var express = require('express');
  var path = require('path');
  var favicon = require('serve-favicon');
  var logger = require('morgan');
  var cookieParser = require('cookie-parser');
  var bodyParser = require('body-parser');
  
  var index = require('./routes/index');
  var classroom = require('./routes/classroom');
  
  var app = express();
  
  // view engine setup
  app.set('views', path.join(__dirname, 'views'));
  app.set('view engine', 'jade');
  
  // uncomment after placing your favicon in /public
  //app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
  app.use(logger('dev'));
  app.use(bodyParser.json());
  app.use(bodyParser.urlencoded({ extended: false }));
  app.use(cookieParser());
  app.use(express.static(path.join(__dirname, 'public')));
  
  app.use('/', index);
  app.use('/classroom', classroom);
  
  // catch 404 and forward to error handler
  app.use(function(req, res, next) {
    var err = new Error('Not Found');
    err.status = 404;
    next(err);
  });
  
  // error handler
  app.use(function(err, req, res, next) {
    // set locals, only providing error in development
    res.locals.message = err.message;
    res.locals.error = req.app.get('env') === 'development' ? err : {};
  
    // render the error page
    res.status(err.status || 500);
    res.render('error');
  });
  
  app.listen(3001);
  
  module.exports = app;
  </code></pre>
  
  <p><strong>classroom.js</strong></p>
  
  <pre><code>var express = require('express');
  var router = express.Router();
  var mysql = require('mysql');
  
  var pool = mysql.createPool({
    connectionLimit : 30,
    host: 'localhost',
    user: 'root',
    password: 'password',
    database: 'dbname'
  });
  
  /* GET Classroom listing. */
  router.get('/', function(req, res, next) {
  
      console.log('A Client Requested Data...');
  
    pool.query('SELECT * FROM classroom ORDER BY childsname ASC', function(err, results) {
      if (err) throw err
      var array = [];
      for(var i = 0, len = results.length; i &lt; len; i++) {
        array.push(results[i]);
      }
  
          res.json(array);
      });
  
  });
  
  /* EDIT Child Flag */
  
  router.get('/edit', function(req, res, next) {
  
    console.log('A flag was edited...');
  
    pool.query("UPDATE classroom SET flagreason = '"+req.body.flagreason+"' WHERE id = '"+req.body.id+"'", function (err, results, fields) {
        if(err) throw err;
        res.send(JSON.stringify(results));
    });
  });
  
  module.exports = router;
  </code></pre>
  
  <p>Can anyone help me, show what I need to change and then explain why it's not working so I can learn from the mistake?</p>