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

Question

我目前有快速设置服务于我的反应组件安装到的静态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.