react-router - 使用 getComponent 如何传递 props？

Question

我不知道如何将 Prop 传递给组件。这很重要，因为我不想在 componentDidMount 方法中获取数据，因为它对搜索引擎不可见。

我的代码看起来像这样

const router = 
<Route path="/" component={App}>
<IndexRoute onEnter={redirectToLogin} component={LandingPage} />
<Route path="panel" component={ ControlPanel }>
  ...
</Route>
<Route 
  path="/:handle" 
  onEnter={maybeRedirectToHome}
  getComponent={(location, callback)=> {
      getSiteHandleByName(location.pathname.slice(1))
      .then(function(handle){
        if (handle){
          callback(null, Portfolio)
        } else {
          callback(null, NotFound)
        }
      })
      .catch(callback)
  }}
  getChildRoutes={(location, callback)=> {
    callback(null, portfolioRoutes)
  }} 
/>
</Route>

当用户访问像 mysite.com/thishandleisvalid 这样的有效 url 时，我试图提供一个组合 React App但我还需要在 getComponent 获取该应用程序的所有内容指向并将其作为属性传入。例如。你通常会做这样的事情 <Portfolio contentItems={fetchedItems} /> .

这样做可能吗？

Answer 1

对于无状态组件，这真的很容易做到。只需执行以下操作:

function getComponent(location, callback) {
  const Component = /* ... */;
  const items = /* ... */;

  callback(null, props => <Component {...props} items={items} />);
}

我们没有明确支持这种模式的原因是，以这种方式进行连接是相当不典型的——对于需要处理此类事情的应用程序，使用 onEnter 更为常见。钩到例如填充 Flux 存储，然后根据需要将组件连接到相关存储。