javascript - 将 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);
    });
}

基本上我所做的就是获取数据并将其传递给处理程序以初始化组件。这是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 />组件作为 Prop 。

查看此演示，特别是 app/server.js (服务器端渲染)和 app/client.js (客户端渲染)。希望这有帮助!

React Router Mega Demo