CODEWITHSUNDEEP
javascriptreactjsexpress
김종현
김종현

Reputation: 53

What is the problem with router division in express? (React)

[app.js]

onCreate = async (event) => {

    event.preventDefault();

    const clubData = new FormData(event.target)
    console.log(clubData);
    const post = await axios.post('/club', {
        method: 'POST',
        body: {
            name : 'name',
            intro : 'intro'
        }
    }).then(response => {console.log(post)})

}

This is when the router is not division.

[server.js]

const express = require('express');
const path = require('path');
const engines = require('consolidate');
const bodyParser = require('body-parser');

const app = express();
const PORT = process.env.PORT || 4000;

app.use(express.static(path.join(__dirname, '..', 'public/')));

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended:true}));

app.post('/club', function(req, res, next) {
   res.send({ test: 'test'});
})

app.set('views', __dirname + '/views');
app.engine('html', engines.mustache); 
app.set('view engine', 'html');

app.listen(PORT, () => {
console.log(`Check out the app at http://localhost:${PORT}`);
});

At this point, we were able to see data coming over from the developer window at Chrome.

However, after splitting the router, an error occurs.

[server.js]

const express = require('express');
const path = require('path');
const engines = require('consolidate');
const bodyParser = require('body-parser');

const app = express();
const PORT = process.env.PORT || 4000;

var clubRouter = require('./router/clubRouter.js');

app.use(express.static(path.join(__dirname, '..', 'public/')));

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended:true}));

app.use('/club', clubRouter);


app.set('views', __dirname + '/views');
app.engine('html', engines.mustache);
app.set('view engine', 'html');

app.listen(PORT, () => {
console.log(`Check out the app at http://localhost:${PORT}`);
});

[clubRouter.js]

const router = require('express').Router();

const controller = require('../controller/clubController');

router.post('/club', function(req, res, next) {
    res.send({ test: 'test'});
})

module.exports = router;

An error occurs at this time.

(POST http://localhost:3000/club 404 (Not Found))

I've now created a project with a react-app-create and webpack.config.Added the code to dev.js file.

devServer: {
  port: 4000,
  open: true,
  proxy: {
  "/": "http://localhost"
  }
},

The code was also added to the package.json file .

"proxy": "http://localhost:4000"

Upvotes: 0

Views: 35

Answers (1)

Anand Undavia
Anand Undavia

Reputation: 3543

The clubRouter is mounted on path /club That means any /club* requests will be handled over to clubRouter

The clubRouter further registers a controller on path /club that sends the response { test: 'test'}

So, The complete path would now be => /club/club

In your React app, try this change and it would work:

const post = await axios.post('/club/club', { ... })

If you think the path is not how you want, you can register the controller in the clubRouter as follows:

router.post('/', function(req, res, next) {
    res.send({ test: 'test'});
})

That way, you would be able to get hit it with the old path as:

const post = await axios.post('/club', { ... })

Upvotes: 1

Related Questions