使用 Meteor.js + React.js 的服务器端路由答案

【问题标题】：Server-side routing with Meteor.js + React.js使用 Meteor.js + React.js 的服务器端路由
【发布时间】：2016-08-30 11:32:09
【问题描述】：

我的问题是如何在服务器端正确设置与客户端 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.js 应用程序是使用 Iron Router 构建的，但我很难让 React 与 Iron Router 一起工作。

请注意：以下代码似乎并不表示需要任何服务器端，这是因为我只是通过教程来设置所有内容，但它最终会...... .right 现在只是试图让路线正常工作。

我一直在做以下事情：

反应代码如下：

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'));
});

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

imports/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：

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>

这是结果（Iron Router 消息表示路由尚未与 react 一起实现）

【问题讨论】：

服务器端 API 调用是什么意思？（流星方法？订阅？REST 调用？）我很难理解你的问题，也许是因为你的帖子不包含问题。 :)
公平点：我的问题是如何在服务器端正确设置与客户端上的 react.js 连接的路由。调用类似于：Meteor.http.call("GET", "search.twitter.com/search.json?q=perkytweets");
我还是不太明白。服务器端路由是什么意思？你想实现服务端的 React 渲染吗？如果是，那么Flow Router SSR 可能会对您有所帮助。
伴随着这个问题 (stackoverflow.com/questions/23975199/…) 和这个页面 (facebook.github.io/react/docs/environments.html)，我想知道如何构建一个 react/meteor 应用程序来执行大量服务器端 api 调用，但是然后只发送特定数据（可以安全公开的数据）以供客户端使用/呈现。
不需要服务器端路由来实现这一点。只需创建一个 Meteor 方法，该方法在服务器上执行 API 调用，处理回复，然后只向客户端发送渲染页面所需的尽可能多的数据。

标签： javascript node.js meteor reactjs

【解决方案1】：

这里不需要使用服务器端路由，只需创建一个服务器端 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});
    });
  } 
}

【讨论】：