Question

在react-router 0.13中，你可以将props传递给路由处理程序，就像这样

serverApp.get('/*', function(req, res) {
  Router.run(AppRoutes, req.url, function(Handler, state) {
    var markup = React.renderToString(
      <Handler path={req.url} myProps={myProps}/>
    );
    res.send('<!DOCTYPE html>' + markup);
  });
});

现在使用react-router v1.0，已被match()和RoutingContext替换。我无法让它发挥作用。我的代码如下：

serverApp.get('/*', function(req, res) {
  match({routes: AppRoutes, location: req.url},
    (error, redirectLocation, renderProps) => {
      var markup;

      if (error) {
        res.status(500).send(error.message);
      } else if (redirectLocation) {
        res.redirect(302, redirectLocation.pathname + redirectLocation.search);
      } else if (renderProps) {
        var myApp = React.cloneElement(<RoutingContext {...renderProps} />, {myProps: 'OK'});
        markup = renderToString(myApp);
        res.status(200).send('<!DOCTYPE html>' + markup);
      } else {
        res.status(404).send('Not found');
      }
    }
  );
});

这是我认为应该工作的，但没有成功。我通过在组件的render方法中注销其他prop来测试它，并将其设置在h1标记中。

关于我在这里做错了什么的想法？非常感谢。

相关：https://github.com/rackt/react-router/issues/1369

Answer 1

您必须将方法createElement传递给RoutingContext。在createElement方法中，您可以访问将要返回的组件。在这里，您可以添加可用于安装的每条路线的外部道具。

服务器：

serverApp.get('/*', function(req, res) {
  match({routes: AppRoutes, location: req.url},
    (error, redirectLocation, renderProps) => {
      var markup;
      var myApp;
      var createElement = function(Component, props) {
        return <Component {...props} myProps="OK"/>;
      };

      if (error) {
        res.status(500).send(error.message);
      } else if (redirectLocation) {
        res.redirect(302,
          redirectLocation.pathname + redirectLocation.search);
      } else if (renderProps) {
        myApp = (
          <RoutingContext
            {...renderProps}
            createElement={createElement}
          />
        );
        markup = renderToString(myApp);
        res.status(200).send('<!DOCTYPE html>' + markup);
      } else {
        res.status(404).send('Not found');
      }
    }
  );
});

反应应用路线：

var AppRoutes = (
  <Route component={AppTemplate} path="/">
    <Route component={OtherTemplate} path="/">
      <Route component={FirstPage} path="/first" />
    <Route />
  <Route />
);

导航到'/ first'时，所有这三个组件都可以通过this.props.myProps

访问myProps

更实际的用例是将flux对象传递给你的应用程序（而不是简单的myProps =“OK”）。

React-router v1.0;将道具传递到服务器

1 个答案: