Question

使用react-router v3＆amp; redux我基本上有一个类似于以下的路由设置：

<Route name="app" path="/" component={App}>
  <IndexRoute component={Catalogue} />
  <Route name="brand" path="/brand/(:brand)" component={Catalogue} />
</Route>

我的目录生成异步请求以获取所有我的产品，然后将其存储在状态中。此外，我的目录组件使用来自Link的{{1}}多个品牌按钮，每个链接都是这样的：

/品牌/品牌A
/品牌/品牌B
/品牌/ brandC

当用户点击品牌过滤器按钮时，目录具有过滤的逻辑，并且仅显示属于brandX的产品作为url参数的一部分。

在目录组件中，我有以下内容：

react-router

问题：我现在的问题是，每当用户点击我的目录组件上的品牌过滤器链接时，路由器就会抓住它（好的。），我的目录组件总是被重新安装（坏事。）并再次获取 ALL 我的产品（可怕的东西！）。获取所有产品后，它按品牌过滤列表（如果在品牌特定路线上）。

基本上我需要一种方法来更新地址栏中的URL以反映品牌过滤器更改（即用户导航到/ brand / brandA）以进行分析，但我想避免：

重新安装相同目录组件
重新获取所有产品

这是性能杀手！有谁知道怎么做这样的事情？任何提示或建议将非常感谢！

Answer 1

如果您在不同的路线上将它们作为单独的组件，那么它们将被重新安装。您明确告诉它这样做。您可以采取一些措施来避免这种情况。

不要通过组件装载触发所有数据提取。这对于小规模，琐碎的项目来说是可以的，但它会很快崩溃。 flux架构专门为此而设计。提前进行提取（在应用程序加载时），并将这些产品加载到商店中。
如果您的路由表非常简单，那么反应路由器v4变得更容易的一件事就是嵌套为页面呈现部分内容的路由。 React是关于处理渲染组件而不是页面的，所以它是关于我们的路由器远离整个网页的整个网址的时间＆＃39;。 react router sidebar示例是一个很好的参考。您可以将此示例应用于标题，侧边栏和页脚。您可以在您的情况下应用它，以便父<Catalog>永远不需要重新安装。

<Route name="app" path="/" component={App}> <Catalog> <Route name="brand" path="/brand/(:brand)" component={BrandList} /> </Catalog> </Route>

如何在需要URI更新时避免重新安装组件（例如过滤器按钮）？

1 个答案: