[英]Server-side routing with Meteor.js + React.js
我的问题是如何在客户端正确设置与 react.js 连接的服务器端路由。
我正在开发一个基于Meteor.js的应用程序,我正在将它与React.js集成。 该应用程序将需要许多路由。 我的主要问题(到目前为止)是,我预计会有很多服务器端 api 调用使用它们各自的(安全)密钥。 电话将类似于
Meteor.http.call("GET", "http://search.twitter.com/search.json?q=perkytweets");
显然,出于安全原因,这些应该是服务器端。 然后我将处理服务器上的数据并传递我需要做出反应的内容,然后在 DOM 上呈现。
Flow Router似乎并不理想,尽管它似乎是Meteor+React
应用程序的Meteor+React
,因为它侧重于客户端路由,而不是我需要的服务器端路由。
通常,Meteor.js 应用程序是用Iron Router构建的,但我在让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'));
});
进口/用户界面/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>
);
}
}
进口/ 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>
这里不需要使用服务器端路由,只需创建一个服务器端 Meteor 方法来执行 API 调用,并显示它们的结果。
此示例组件在安装时调用一个方法,并异步处理其返回值。
export class Pony extends React.Component {
// ...
componentDidMount() {
Meteor.call("call-pony-name-api", customPonyParameter, (error, result) => {
if (error) {...}
this.setState({ponyName: result.ponyName});
});
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.