使用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的,但是在使用React
与Iron 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}); }); } }