我无法弄清楚如何将道具传递给组件.这很重要,因为我不想在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这样的有效网址时,我正在尝试提供投资组合React App,但我还需要在getComponent点获取该应用的所有内容并将其作为属性传递.例如.你通常会做这样的事情< Portfolio contentItems = {fetchedItems} />.
这样做有可能吗？
使用无状态组件非常容易.做一些像：
function getComponent(location,callback) {
const Component = /* ... */;
const items = /* ... */;
callback(null,props => <Component {...props} items={items} />);
}
我们没有明确支持这种模式的原因是因为以这种方式连接起来是相当不典型的 – 对于需要处理这类事情的应用程序,使用onEnter挂钩更常见.填充Flux商店,然后根据需要将组件连接到相关商店.
