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

Question

我目前已快速设置为静态 html 页面提供服务，我的 React 组件会安装到该页面。我也在使用 React 路由器，因为我有嵌套路由。例如：

我有一个 App 组件（绿色轮廓）。在该组件中，我渲染了一个页眉组件（橙色轮廓）和一个页脚组件（红色轮廓）并通过 this.props.children 传入了一个审阅组件（蓝色轮廓）。

我的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 文件（反应路由器）：

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 请求（从游戏组件获取以显示数据库中的所有评论，并 POST 从评论组件创建新评论), 但应该在哪里发生呢？我不知道它是否必须在我的快速路线中发生，因为在我看来，所有快递正在做的就是渲染静态 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() 方法上在组件本身内部执行此操作，在您的情况下它将在游戏组件上执行。

我的考虑是使组件可重用，尤其是当组件依赖于请求时。在组件内部实现请求的好处是，无论您将组件安装在路由路径上的何处，组件都会在安装时自动调用请求。

参考我的经验，你也可以在express上请求服务器端请求，因为有特殊情况需要从服务器端执行请求处理。例如从客户端请求 public API 时处理跨源资源共享 (CORS) 问题，使用 OAuth 等身份验证请求处理等。

如果你的请求很简单，我觉得组件内部的请求就足够了。希望能帮助到你。谢谢

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

How to send GET/POST requests using express and react router?

express

reactjs

react-router