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

Question

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

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

我的目录发出异步请求以获取 所有 我的产品，然后将它们存储在状态中。此外，我的 Catalogue 组件有多个 brand 按钮，使用来自 react-router 的 Link，每个链接都指向以下内容：

• /brand/brandA
• /brand/brandB
• /brand/brandC

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

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

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

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

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

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

这是性能杀手！有谁知道如何做这样的事情？任何提示或建议将不胜感激！

Answer 1

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

• 不要通过组件装载触发所有数据提取。这在小型、琐碎的项目中是可以的，但它很快就会崩溃。 flux 架构是专门为此设计的。预先获取（在应用程序加载时），然后将这些产品加载到商店中。

• 如果您的路由表就这么简单，那么 react-router v4 最简单的一件大事就是嵌套路由来呈现页面的部分内容。 React 只处理渲染组件，而不是页面，所以我们的路由器是时候摆脱整个“一个完整网页的一个 URL”了。 react router sidebar 示例是一个很好的参考。您可以将此示例应用于不只是页眉、侧边栏和页脚。您可以在您的情况下应用它，这样父 <Catalog> 就不需要重新挂载。

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