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

我目前有快速设置服务于我的反应组件安装到的静态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页面,然后反应 – 路由器接管后,处理要显示的组件.

非常感谢任何和所有的帮助.

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

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

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

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

你可以简单地为POST提供另一个功能.

原文链接：https://www.f2er.com/react/443144.html

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

猜你在找的React相关文章