从对象列表制作详细信息页面的最佳方法是什么？

Question

在我的React项目中，当用户从商店列表中单击一个对象时，我使用<Link/>组件来传递商店对象。但是，如果我使用这种方式，即使用户通过单击链接来获取URL，也无法通过该链接进行访问。在处理Search Engine Optimization (SEO)时，我需要允许用户通过url访问商店详细信息页面。

组件示例

<Link
  to={{
    pathname: `/${store.domainKey}`,
    state: { store: store }
  }}
>
  <img ...>
</Link>

我正在通过API获取数据。如果是这样，建立链接的最佳方法是什么？我是否应该使用其商店的详细信息页面使用参数来引用API？

Answer 1

您的组件应该是自给自足的，而不是将商店从<Link />传递到组件。因此，当用户直接打开路线时，假设/books，您的组件将负责：

1. 首先从API获取所需的数据，然后将其保存在商店中。
2. 在那之后，它将渲染所有的书。

我建议您阅读有关Containers and Presentational components的信息。

根据上述流程，容器将负责数据的获取（步骤1），而Presentational组件将负责呈现书籍（步骤2）。