首页 文章

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

提问于
浏览
0

我正在关注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来初始化组件 . 这是反应中的文件路由:

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`.

因此是一个错误 . 你知道在这种情况下通过道具的正确方法是什么?

编辑

错误信息

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

1 回答

  • 1

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

    它仍将处理 Router.run 方法并匹配路由,但它将是从服务器加载的相同页面 . 但是,在此之后,前端必须复制服务器端功能(即获取数据,传递给路由组件) .

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

    看看这个演示,特别是 app/server.js (服务器端渲染)和 app/client.js (客户端渲染) . 希望这可以帮助!

    React Router Mega Demo

相关问题