Question

我的路由器看起来像这样：

<Router>
  <Route path="/" component={Page}>
    // ...
    <Route
      path=":id"
      components={{ menu: ResourceMenu, content: Resource }}
    >
      <Route
        path="foo"
        component={ResourceFoo}
      />
      <Route
        path="bar"
        component={ResourceBar}
      />
      // ...
    </Route>
    // ...
  </Route>
</Router>

Page组件包含menu和content的插槽，位于标记的完全不同的部分。没有办法合并它们。

ResourceFoo，ResourceBar和其他人作为Resource的孩子安装。当他们关注它时，Resource也会向他们传递一些道具，这些道具是从API中检索的。

问题是，ResourceMenu取决于与Resource相同的所有后端资源，现在他们都在制作自己的API请求。在某种程度上可以处理代码重复，但我还没有适当的缓存，所以客户端最终会发出冗余请求。

如何将Resource和ResourceMenu包裹在一个父级中（或以某种方式将ResourceMenu放在Resource内），同时仍能填充Page＆＃39; s插槽？或者是否有一些根本不同的方法我不知道？

Answer 1

我会避免在路线上使用components属性。感觉就像你可以用简单的布局完成你需要的东西。让我们说Page有一个菜单和内容部分，ResourceFoo和ResourceBar都可以使用这些并简单地将它们传递给它们，如下所示：

https://gist.github.com/marr/36cdbe52acd38de9045e

我可能过度简化了事情，但看起来你有标准的路线，可以使用上述结构。

在单个路由的两个组件之间共享状态

1 个答案: