使用Meteor.js + React.js进行服务器端路由

我的问题是如何正确设置在客户端上与react.js连接的服务器端路由。

我正在构build一个基于Meteor.js的应用程序,我将其与React.js集成在一起。 该应用程序将需要一些路线。 我的主要问题(到目前为止)是,我预计有很多服务器端API调用使用他们各自的(安全)密钥。 电话会是这样的

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

显然,出于安全原因,这些应该是服务器端。 然后我将处理服务器上的数据,并通过我需要的反应,然后在DOM上呈现。

似乎Flow Router并不理想,虽然它似乎是Meteor+React应用程序的开始,因为它专注于客户端路由,而不是我需要的服务器端路由。

通常情况下,Meteor.js应用程序是使用Iron Router构build的,但是在使用ReactIron Router一起工作时遇到了一些困难。

请注意:下面的代码似乎并没有表明需要任何服务器端,这是因为我只是得到一切与教程设置,但它最终会…现在只是试图让路线工作。

我一直在做以下工作:


反应代码如下:

客户机/ main.html中

 <head> <title>List</title> </head> <body> <div id="render-target"></div> </body> 

客户机/ 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')); }); 

import/ 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> ); } } 

import/ 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, }; 

尝试修复#1:

服务器/ main.js

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

客户机/ main.html中

 <tempate name="homePage"> <head> <title>List</title> </head> <body> <div id="render-target"></div> </body> </template> 

这里是结果(铁路路由器消息意味着路线还没有实施反应) 在这里输入图像说明

这里不需要使用服务器端路由,只需创build一个服务器端的Meteor方法来执行API调用,并显示它们的结果。

此示例组件在装入时调用方法,并asynchronous处理其返回值。

 export class Pony extends React.Component { // ... componentDidMount() { Meteor.call("call-pony-name-api", customPonyParameter, (error, result) => { if (error) {...} this.setState({ponyName: result.ponyName}); }); } }