Javascript 如何使用react router dom在路由更改时重新装入组件，而不是重新呈现

更新：此问题与重复问题有何不同？

在这里，相同的组件由两个不同的路由渲染。在另一个问题中，OP想知道如何通过更改路由参数反复重新装载由同一个路由渲染的组件

链接：

---

我在

ProductSearch

组件上遇到以下情况

它可能由两个不同的

呈现：

它们都显示
ProductSearch
页面，并带有相应产品的过滤器

<Route exact path='/category/:slug' component={ProductSearchContainer}/>
<Route exact path='/search/:slug' component={ProductSearchContainer}/>

这就是我最后要做的：

通过为路由中的渲染组件提供密钥，可以使其重新装载而不是重新渲染

<Route exact path='/category/:slug' render={(routeProps)=>
  <ProductSearch {...routeProps} key={routeProps.match.params.slug}/>}
/>
<Route exact path='/search/:slug' render={(routeProps)=>
  <ProductSearch {...routeProps} key={'search'}/>}
/>


}
/>
}
/>

现在我得到以下结果：

因此，以下是我最后要做的事情：

通过为路由中的渲染组件提供密钥，可以使其重新装载而不是重新渲染

<Route exact path='/category/:slug' render={(routeProps)=>
  <ProductSearch {...routeProps} key={routeProps.match.params.slug}/>}
/>
<Route exact path='/search/:slug' render={(routeProps)=>
  <ProductSearch {...routeProps} key={'search'}/>}
/>


}
/>
}
/>

现在我得到以下结果：

可能重复-其中一个答案显示了强制重新装载的方法，其他答案解释了为什么不装载更好。可能重复-其中一个答案显示了强制重新装载的方法，其他答案解释了为什么不装载更好。