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

使用

react router v3

和

redux

我基本上有一个类似以下的路由设置：

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

componentDidMount() {
  if (this.props.params.brand) {
    // this is a redux action dispatch
    this.props.setBrandFilter(this.props.params.brand);
  }
}

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

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

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

---

这是一个性能杀手！有人知道怎么做这样的事吗？任何提示或建议将不胜感激

如果您将它们作为单独的组件安装在单独的路由上，那么它们将被重新安装。你明确地告诉它这样做。你可以做一些事情来避免这种情况

• 不要通过组件装载触发所有数据获取。这在小规模、琐碎的项目上是可以的，但它很快就会崩溃。该体系结构是专门为此而设计的。提前获取（在应用程序加载时），并将这些产品加载到存储中
• 如果您的路由表如此简单，那么react router v4使之更容易的一件大事就是嵌套呈现页面部分内容的路由。React是处理呈现组件的，而不是页面，所以现在是我们的路由器摆脱“一个URL对应一个完整网页”的时候了。这个例子是一个很好的开始参考。您可以将此示例应用于不仅仅是页眉、边栏和页脚。您可以在您的案例中应用它，这样父级
  就不需要重新装载

---

相同的组件，但连接在两个不同的路径上-索引路径：

/

和品牌过滤器路径

/brand/（：brand）

。只有在IndexRoute和brand filter路由之间来回切换时，才会重新装载它。希望避免这种情况，因为它是相同的组件-但需要更新URL。我们将看一看您的第一个建议，它应该有助于重新获取，但不会解决重新安装问题。谢谢。它修复了你的重新安装问题。您不能到处更改父级，但如果您只更改组件的内容，则可以使用路由来执行此操作。在他们的侧边栏示例中，它也不会不断地卸载和重新安装侧边栏。无论您选择如何组织路线，如果您保持父/子关系，其中品牌列表可以作为

this.props.children

包含在

的

渲染中，它都会起作用。也就是说，当您不将远程抓取绑定到组件装载时，重新装载是一个相当小的问题。