Express.js - 可以找到我的路线

Question

我正在使用 react.js 和 express.js，但我的 fetch 请求出现 404 错误。

我只是想让我的路线 return testing express.js...

[app.js]

'use strict';

const NODE_ENV = process.env.NODE_ENV;
const PORT = process.env.PORT;

const next = require('next');
const express = require('express');
const api = require('./api');

const client = next({ dev: NODE_ENV === 'development' });
const clientHandler = client.getRequestHandler();
const app = express();

client.prepare().then(() => {
  app.use('/api', api);
  app.get('*', (req, res) => clientHandler(req, res));
});

const listener = app.listen(PORT, err => {
  if (err) throw err;
  console.log('listening on port: %d', listener.address().port); //eslint-disable-line
});

[/api/index.js]

'use strict';

const express = require('express');
const app = express();

app.get('/api/test', function (req, res) {
    res.send('testing express.js...');
});

module.exports = app;

[Body.js]

import React from 'react';

export default class Body extends React.Component {
  constructor(props) {
    super(props);    
    this.fetchContacts = this.fetchContacts.bind(this);
  }

  componentDidMount() {
    this.fetchContacts();
  }

  async fetchContacts() {
        const res = await fetch('/api/test');
    const contacts = await res.json();
    log(contacts);
    this.setState({ contacts });
  }

  render() {
    return <div>hello world!</div>;
  }
}

问题：为什么我会收到 404 错误？

Answer 1

这不是在 nodejs 上加载 React JS 文件的方法，请遵循此基本（React + NodeJS）指南：

https://blog.yld.io/2015/06/10/getting-started-with-react-and-node-js/#.Wd7zSBiWbyg

或使用"create-react-app"：

https://medium.com/@patriciolpezjuri/using-create-react-app-with-react-router-express-js-8fa658bf892d

Answer 2

为了使您的 /api/test 路由正常工作，您需要更改此：

app.get('/api/test', function (req, res) {
    res.send('testing express.js...');
});

对此：

app.get('/test', function (req, res) {
    res.send('testing express.js...');
});

您的路由器已经在查看 /api，因此当您在路由器上放置 /api/test 的路由时，您实际上是在为 /api/api/test 创建路由。要修复它，请进行上述更改。

此外，您的 index.js 文件不应使用 app 对象。它应该使用 express.Router() 对象，虽然 app 对象也是一个路由器，所以它可能有点工作，但这不是它应该完成的方式。

Express.js - 可以找到我的路线

Express.js - can find my route

express

reactjs

fetch-api