В чем проблема с делением роутера в экспрессе?(React)

Question

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

}

Это когда маршрутизатор не делится.

[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}`);
});

На этом этапемы смогли увидеть данные, поступающие из окна разработчика в Chrome.

Однако после разделения маршрутизатора возникает ошибка.

[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;

В это время возникает ошибка.

(POST http://localhost:3000/club 404 (не найдено))

IТеперь мы создали проект с помощьюact-app-create и webpack.config. Добавили код в файл dev.js.

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

Код также был добавлен в файл package.json.

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

Answer 1

clubRouter монтируется на пути /club Это означает, что любые /club* запросы будут обработаны на clubRouter

. clubRouter дополнительно регистрирует контроллер на пути /club, который отправляетответ { test: 'test'}

Итак, полный путь теперь будет => /club/club

В вашем приложении React попробуйте это изменение, и оно будет работать:

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

---

Если вы думаете, что путь не такой, как вы хотите, вы можете зарегистрировать контроллер в clubRouter следующим образом:

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

Таким образом, вы сможете получить его с помощьюстарый путь как:

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