如何使用express和react路由器发送GET / POST请求？

Question

我目前有快速设置服务于我的react组件挂载的静态html页面。我也使用react路由器，因为我有嵌套路由。例如：

我有一个App组件（绿色轮廓）。在该组件中，我正在渲染一个Header组件（橙色轮廓）和一个Footer组件（红色轮廓），并通过this.props.children传递一个Review组件（蓝色轮廓）。

我的server.js文件（快递）：

const express = require('express');

const app = express();

app.use(express.static('dist'));

const PORT = process.env.PORT || 3000;

app.listen(PORT, function() {
  console.log(`Listening on port ${PORT}...`);
});

我的routes.js文件（react-router）：

import React from 'react';
import ReactRouter, {
  Router,
  Route,
  browserHistory,
  IndexRoute,
} from 'react-router';

import App from '../components/App';
import Home from '../components/Home';
import Review from '../components/Review';
import Game from '../components/Game';

const routes = (
  <Router history={browserHistory}>
    <Route path="/" component={App} >
      <IndexRoute component={Home} />
      <Route path="/game/:id" component={Game} />
      <Route path="/game/:id/review" component={Review} />
      <Route path="*" component={Home} />
    </Route>
  </Router>
);

export default routes;

我的问题是，我希望能够发出GET / POST请求（来自Game组件的GET显示来自db和POST的所有评论以从Review组件创建新的评论），但是应该在哪里发生？我不知道它是否必须在我的快速路线中发生，因为在我看来，所有快递都在做渲染静态html页面，然后反应 - 路由器接管后，处理要显示的组件。

非常感谢任何和所有帮助。

Answer 1

对于GET请求，您可以在单独的函数中加载初始数据，而不是在使用componentDidMount安装组件之后加载该数据，如下所示：

class Game extends React.Component {  
  constructor() {
    this.state = { data: [] }
  }

  loadCommentsFromServer() {
    $.ajax({
       ....
      }
    });
  }

  componentDidMount() {
    this.loadCommentsFromServer();
    setInterval(this.loadCommentsFromServer, this.props.pollInterval);
  }
}

你可以为POST设置另一个功能。

Answer 2

我只想分享我的经验，希望它有所帮助。我从来没有在React Route上做过请求，尽管它可以。所以，我更喜欢在componentDidMount()方法的组件内部执行此操作，在您的情况下，它将在Game组件上。

我的考虑是使组件可重用，特别是如果组件取决于请求。当您在组件内部实现请求时，您的组件将在安装时自动调用请求，无论您将组件安装在路径路径上，都会自动调用该请求。

根据我的经验，您也可以在Express上作为服务器端请求发出请求，因为有特殊情况需要从服务器端执行请求处理。例如，当从客户端请求公共API时，处理跨源资源共享（CORS）问题，使用OAuth等的身份验证请求处理等。

如果您的请求非常简单，我认为组件内部的请求就足够了。 希望能帮助到你。谢谢