基本上我的问题围绕着父组件和子组件之间关系的最佳实践,以及如何仅使用路由中的特定道具呈现子组件,以共享URL链接(如在Facebook上共享内容) .

例如:

我的父组件是Photos容器,它负责渲染PhotoFeed组件(后者又呈现PhotoFeedItem组件) .

我有一个这样的简单路线:

<Route path="photos" component={Photos} onEnter = {onPageEnter}/>

这将呈现"Photos"部分,在到达时呈现PhotoFeed . 当用户点击PhotoFeedItem时,PhotoDetails组件呈现的基本上是扩展图像的模态,以及有关照片的更多详细信息,如注释,标签等 . 所有这些功能都已经开发出来了,我把它全部工作了当用户登陆"Photos"部分时正确 .

我的组件结构可以总结如下:

<Photos>

  <PhotoFeed>
    <PhotoFeedItem onClick={this.expandPhoto}/> * n
  </PhotoFeed>

  {this.state.expanded ? <PhotoDetails data={this.state.photoToExpand}/>

</Photos>

状态测试检查用户是否已单击PhotoFeedItem,如果是,则使用有关照片的更详细数据呈现扩展的PhotoDetails模式 .

我的主要问题是,在根据路线呈现特定子组件方面是否存在任何最佳实践 . 它就像创建这样的Route一样简单:

<Route path="photos" onEnter = {onPageEnter}>
    <IndexRoute component={Photos} onEnter = {onPageEnter}/>
    <Route path=":photoId" component={PhotoDetails}/>
</Route>

因此,可共享的URL将类似于www.myapp.com/photos/12,从而启动在我们的数据库中具有id 12的PhotoDetails模式(或类似的东西)?

I guess my question comes down to these thoughts / concerns:

到目前为止,我已经将Photos父组件提取并将所有数据传递给其子组件 . 根据用户点击的FeedItem,它将使用更详细的数据正确启动扩展模式 . 现在....如果我想实现可共享的URL,我应该如何使用数据填充PhotoDetails组件?我的PhotoDetails模式应该从其父级(Photos.js)接收数据还是应该查看URL并使用它来确定从哪个ID / endpoints 获取自己的数据?

如果我仍然可以通过保持父照片组件中的数据获取来实现可共享的URL,我如何在路由中反映这一点(最终可以在社交媒体,电子邮件等上共享/链接)?