小编Ale*_*van的帖子

我使用RR 3在服务器端渲染方面做了很多工作,所以我想看看它在v4的上下文中是如何工作的.我从网站上看了教程,但由于渲染现在与路由匹配一起发生,因此无法像以前那样实现预取数据.

以下是我用v3进行服务器渲染的方法:https: //github.com/alexnm/react-seed/blob/master/server/index.js

基于匹配函数,我将调用所有组件树中的所有预取函数,然后等待Promise.all它们完成,然后触发renderToString函数并返回html.

在RR4中,我们只有<ServerRouter>组件,因此我现在提供的解决方案是复制渲染代码:https: //github.com/FortechRomania/react-redux-complete-example/blob/master/src/server/index. JS

我还使用标签render上的函数<Match>来触发预取操作.它很丑陋,并在我想用预取数据呈现的页面的父组件中引入了各种依赖项.

我在这里错过了什么？有没有人为这种情况找到更好的解决方案？我还没有找到任何有用的东西.

我正在建立一个带有react和react-router的站点，并且我有两种不同类型的路由，例如下面的示例：

<Route name="products" path="/:type/*" handler={ ProductList } />
<Route name="generic-template" path="/*" handler={ TemplatePage } />

因此，我的产品页面需要type参数，该参数可以是A，B或C，并且仅当类型为A，B或C时，我希望我访问的任何链接都可以匹配我的产品路线。例如：

• / type-A / bla-bla-filter->应该加载ProductList
• / type-B / other-params-> ProductList应该加载
• / services / details-> TemplatePage应该加载

但是，根据我现在的情况，Products路由会匹配任何页面，因为类型只是作为斜杠后的第一个字符串进行匹配。作为一种解决方法，我尝试将我的ProductList组件包装到单独的包装器组件中，这些包装器仅发送该类型参数，如下所示：

var TypeAWrapper = React.createClass({
  render: function () {
    return (
      <ProductList params={{ splat: this.props.params.splat, type: 'A' }} />
    );
  }
});

var TypeBWrapper = React.createClass({
  render: function () {
    return (
      <ProductList params={{ splat: this.props.params.splat, type: 'B' }} />
    );
  }
});

然后我针对具有静态匹配的每种产品使用了不同的路线。

有谁知道更好的解决方案吗？