Wie senden Sie GET/POST-Anfragen mit Express- und Reagieren-Router?

Question

Ich habe derzeit express eingerichtet, um eine statische HTML-Seite zu bedienen, auf der meine reagierenden Komponenten installiert werden. Ich benutze auch Reagieren Router, weil ich Routen verschachtelt habe. Zum Beispiel:

Ich habe eine App Komponente (grüne Umrandung). Innerhalb dieser Komponente rendere ich eine Header-Komponente (orange Outline) und eine Footer-Komponente (rote Outline) und übergebe eine Review-Komponente (blauer Umriss) durch this.props.children.

Meine server.js Datei (express):

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}...`); 
}); 

Meine routes.js Datei (reagieren-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; 

Meine Frage ist, möchte ich sein Kann GET/POST-Anfragen stellen (GET von der Game-Komponente, um alle Reviews von einer db und POST anzuzeigen, um eine neue Review aus der Review-Komponente zu erstellen), aber wo soll das passieren? Ich kann nicht sagen, ob es auf meinen Expressrouten passieren muss, weil es mir scheint, dass alles, was express tut, die statische html-Seite rendert und dann reait-router übernimmt danach mit der Handhabung welcher Komponenten angezeigt wird.

Jede und alle Hilfe wird sehr geschätzt.

Answer 1

Für die GET Anfrage können Sie Ausgangsdaten in einer separaten Funktion laden, als in diese Daten zu laden, nachdem die Komponente montiert ist mit componentDidMount etwa so:

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

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

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

Sie können einfach eine andere Funktion für die tun haben POST.

Answer 2

Ich möchte nur meine Erfahrungen teilen, hoffe es hilft. Ich mache nie eine Anfrage auf React Route, obwohl es möglich ist. Also, ich bevorzuge diese Aktion innerhalb der Komponente selbst auf componentDidMount() Methode durchzuführen, in Ihrem Fall wird es auf Spielkomponente sein.

Meine Überlegung ist es, Komponente wiederverwendbar zu machen, vor allem, wenn die Komponente abhängig von der Anfrage ist. Der Vorteil, wenn Sie eine Anforderung in der Komponente implementieren, ist, dass Ihre Komponente automatisch die Anforderung beim Mounten anfordert, unabhängig davon, wo Sie die Komponente im Routenpfad installieren.

Bezieht sich auf meine Erfahrung, können Sie auch eine Anfrage auf Express als Server-Seite Anfrage, da gibt es besondere Bedingung, die eine Anfrage Verarbeitung von Server-Seite durchführen müssen. Wie zum Beispiel die Behandlung von CORS-Problemen (Cross-Origin Resource Sharing), wenn eine Anfrage an die öffentliche API von der Client-Seite aus erfolgt, die Verarbeitung von Authentifizierungsanforderungen wie die Verwendung von OAuth und mehr.

Wenn Sie Anfrage ist ziemlich einfach, ich denke, Anfrage innerhalb der Komponente ist ausreichend. Hoffe es hilft. Danke