React不会在路由参数更改或查询更改时重新加载组件数据
React不会在路由参数更改或查询更改时重新加载组件数据
提问于 2018-01-08 00:36:36
我有一个带有链接的“主页”组件，当您单击一个链接时，产品组件将与产品一起加载。我还有另一个组件，它总是可见的，显示“最近访问的产品”的链接。
这些链接在产品页面上不起作用。当我单击链接时，url会更新，并且会进行渲染，但产品组件不会随着新产品的更新而更新。
请参阅此示例：Codesandbox example
以下是index.js中的路由：
<BrowserRouter>
<div>
<Route
exact
path="/"
render={props => <Home products={this.state.products} />}
/>
<Route path="/products/:product" render={props => <Product {...props} />} />
<Route path="/" render={() => <ProductHistory />} />
<Link to="/">to Home</Link>
</div>
</BrowserRouter>;ProductHistory中的链接如下所示：
<Link to={`/products/${product.product_id}`}> {product.name}</Link>所以它们与Route path="/products/:product"相匹配。
当我在产品页面上尝试使用ProductHistory链接时，URL会更新并呈现，但组件数据不会更改。在Codesandbox示例中，您可以在Product components render函数中取消对警报的注释，以查看当您单击链接时它会呈现出来，但没有任何反应。
我不知道是什么问题is...Can你解释了这个问题并找到了解决方案？那太好了!
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48139281
复制相关文章
相似问题