将 props 传递给服务器中 React 路由器的处理程序

Question

我正在关注 react-router 指南中报告的示例

var App = React.createClass({
  render: function () {
    return <div>Hi</div>;
  }
});

var routes = (
  <Route handler={App} path="/" />
);

// if using express it might look like this
app.use(function (req, res) {
  // pass in `req.url` and the router will immediately match
  Router.run(routes, req.url, function (Handler) {
    var content = React.renderToString(<Handler/>);
    res.render('main', {content: content});
  });
});

很简单，不是吗？相反，这是我的代码：

export function index(req: express.Request, res: express.Response, next: Function) {
    Router.run(routes, req.url, (Handler, state) => {
        fs.readFileAsync(
            path.join(__dirname, '..', 'mockData/airport-codes.csv'),
            'utf-8'
        ).then((content) => {
            return csv.parseAsync(content);
        }).then((parsedContent: Array<string[]>[]) => {
            ResponseHelper.renderTemplate('index', res, {
                output: React.renderToString(React.createElement(Handler, {
                    header: [
                        "ID", "Type", "Name", "Latitude (deg)", "Longitude (deg)", "Elevation", "Continent", "Country ISO", "Region ISO", "Municipality", "GPS Code", "IATA Code", "Local Code"
                    ],
                    initialData: parsedContent
                }))
            });
        }).catch(next);
    });
}

基本上我所做的是获取数据并传递给 Handler 以初始化组件。这是 react 中的文件路径：

import { Route } from "react-router";
import * as React from "react";

import Excel from "../components/Excel";

export default (
  <Route handler={Excel} path="/" name="excel" />
);

这是前端的入口点

import * as React from "react";
import * as Router from "react-router";

import routes from "./shared/routes";

Router.run(routes, Router.HistoryLocation, (Root, state) => {
  React.render(<Root />, document.getElementById('app'));
});

我的问题是，当我启动应用程序时，我收到以下警告：

Warning: Failed propType: Required prop `header` was not specified in `Excel`. Check the render method of `Router`.
Warning: Failed propType: Required prop `initialData` was not specified in `Excel`. Check the render method of `Router`.

因此出现错误。你知道在这种情况下哪种方式传递 props 是正确的吗？

编辑

错误信息

Uncaught SyntaxError: Unexpected token &
1../components/Excel @ bundle.js:4s @ bundle.js:1e @ bundle.js:1(anonymous function) @ bundle.js:1

Answer 1

像你这样的同构应用程序的生命周期是首先，服务器运行 JS 代码并返回呈现结果的 HTML 字符串表达式。它将它挂载到 DOM，然后在上面加载你的前端应用程序。当然 DOM 应该是相同的，所以它不需要真正重新渲染任何东西，但它确实将所有 JS 事件处理程序、React 代码等安装到窗口。

它仍然会处理Router.run 方法并匹配路由，但它将是从服务器加载的同一个页面。然而，在那之后，前端必须复制服务器端功能（即获取数据，传递给路由组件）。

因此，在您的前端代码中，您需要获取通常在服务器上执行的所需数据，并将其作为道具传递给<Root /> 组件。

查看这个演示，特别是app/server.js（服务器端渲染）和app/client.js（客户端渲染）。希望这会有所帮助！

React Router Mega Demo