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

时间:2017-10-12 04:01:45

标签: reactjs express fetch-api

我使用react.jsexpress.js并在我的fetch请求中收到404错误。

我只是想让我的路线返回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错误?

2 个答案:

答案 0 :(得分:1)

要使/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对象也是一个路由器,所以它可能有用,但它不是应该这样做的。

答案 1 :(得分:0)

这不是在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