Server-side Routing mit Meteor.js + React.js

Meine Frage ist, wie Sie Routen auf der Serverseite korrekt einrichten, die mit react.js auf dem Client verbunden sind.Server-side Routing mit Meteor.js + React.js

Ich arbeite an einer Anwendung gebaut auf Meteor.js, die ich mit React.js integrieren. Die Anwendung erfordert eine Reihe von Routen. Mein Hauptproblem (bis jetzt) ist, dass ich eine Menge von serverseitigen API-Anrufen erwarte, die ihre jeweiligen (sicheren) geheimen Schlüssel verwenden. Die Anrufe werden so etwas wie

Meteor.http.call("GET", "http://search.twitter.com/search.json?q=perkytweets");

Offensichtlich sollten diese Server-Seite aus Sicherheitsgründen sein. Ich werde dann mit den Daten auf dem Server umgehen und passiere was ich brauche um zu reagieren, um dann auf dem DOM gerendert zu werden.

Es scheint, dass Flow Router nicht ideal ist, obwohl es scheint, für Meteor+React Anwendungen zu gehen, da es sich auf clientseitige Routing und nicht das serverseitige Routing konzentriert, das ich benötige.

Normalerweise werden Meteor.js-Anwendungen mit Iron Router gebaut, aber ich hatte einige Schwierigkeiten, React neben Iron Router zu arbeiten.

Bitte beachten Sie: der folgende Code scheint keine Notwendigkeit für etwas Server-Seite anzuzeigen, das ist, weil ich gerade alles mit einem Tutorial eingerichtet habe, aber es wird schließlich ... gerade jetzt gerade versuchen, Routen funktionieren zu lassen.

Ich mache folgendes:

CODE REACT UNTEN:

Client/main.html

<head> 
    <title>List</title> 
</head> 

<body> 
    <div id="render-target"></div> 
</body>

Client/main.jsx

import React from 'react'; 
import { Meteor } from 'meteor/meteor'; 
import { render } from 'react-dom'; 

import App from '../imports/ui/App.jsx'; 

Meteor.startup(() => { 
    render(<App />, document.getElementById('render-target')); 
});

Importe/ui/App.jsx

import React, { Component } from 'react'; 
import Spot from './Spot.jsx'; 

// App component - represents the whole app 
export default class App extends Component { 
    getSpots() { 
    return [ 
     { _id: 1, text: 'This is task 1' }, 
     { _id: 2, text: 'This is task 2' }, 
     { _id: 3, text: 'This is task 3' }, 
    ]; 
    } 

    renderSpots() { 
    return this.getSpots().map((spot) => (
     <Spot key={spot._id} spot={spot} /> 
    )); 
    } 

    render() { 
    return (
     <div className="container"> 
     <header> 
      <h1>List</h1> 
     </header> 
     <ul> 
      {this.renderSpots()} 
     </ul> 
     </div> 
    ); 
    } 
}

Importe/ui/Spot.jsx

import React, { Component, PropTypes } from 'react'; 

// Task component - represents a single todo item 
export default class Spot extends Component { 
    render() { 
    return (
     <li>{this.props.spot.text}</li> 
    ); 
    } 
} 

Spot.propTypes = { 
    // This component gets the task to display through a React prop. 
    // We can use propTypes to indicate it is required 
    spot: PropTypes.object.isRequired, 
};

Versuchte Fix # 1:

server/main.js

import { Meteor } from 'meteor/meteor'; 

Meteor.startup(() => { 
    // code to run on server at startup 
}); 
Router.route('/', function() { 
    this.layout('homePage'); 
});

Client/main.html

<tempate name="homePage"> 
    <head> 
     <title>List</title> 
    </head> 

    <body> 
     <div id="render-target"></div> 
    </body> 
</template>

Hier ist das Ergebnis (die Eisernen Router Nachricht bedeutet, dass die Routen nicht neben der Reaktion umgesetzt worden)

Quelle

2016-05-04 maudulus

Was meinen Sie mit serverseitigen API-Aufrufe? (Meteor-Methoden? Abonnements? REST-Aufrufe?) Ich habe es schwer, dein Problem zu lösen, vielleicht, weil dein Beitrag keine Frage enthält. :) – aedm

Messepunkt: Meine Frage ist, wie Sie Routen auf der Serverseite korrekt einrichten, die mit react.js auf dem Client verbunden sind. Aufrufe wären etwas wie: Meteor.http.call ("GET", "http://search.twitter.com/search.json?q=perkytweets"); – maudulus

Ich verstehe immer noch nicht wirklich. Was meinst du mit serverseitigen Routen? Möchten Sie das serverseitige React-Rendering erreichen? Wenn ja, dann könnte Ihnen [Flow Router SSR] (https://github.com/kadirahq/flow-router/tree/ssr) helfen. – aedm

Keine Notwendigkeit, Server-Seite verwenden hier das Routing, erstellen Sie einfach ein server- Side Meteor-Methode, um die API-Aufrufe durchzuführen und ihre Ergebnisse anzuzeigen.

Diese Beispielkomponente ruft eine Methode beim Mounten auf und behandelt ihren Rückgabewert asynchron.

export class Pony extends React.Component { 

    // ... 

    componentDidMount() { 
    Meteor.call("call-pony-name-api", customPonyParameter, (error, result) => { 
     if (error) {...} 
     this.setState({ponyName: result.ponyName}); 
    }); 
    } 
}

Quelle

2016-05-05 20:50:59 aedm

Server-side Routing mit Meteor.js + React.js

Antwort

Verwandte Themen