Question

我定义了以下路线：

<Switch>
    <Route path="/" exact component={HomePage} />
    <Route path="/project/:id/search" component={SearchPage} />
    <Route path="/project/:id/upload" component={UploadPage} />
</Switch>

问题在于，当您导航到另一个项目的搜索页面时，搜索结果（SearchPage组件的本地状态）仍然存在。我可以通过在ID更改时手动清除willReceiveProps中的状态来解决它，但是我想避免这种情况，因为/project的多个子页面需要逻辑。

使用render={()=> <SearchPage />}没有区别。

有什么干净的方法可以确保在URL中的参数更改时重新初始化我的组件？

Answer 1

您可以使用“密钥重置状态”技术：如果特殊道具key不同，React肯定会重新创建元素而不是进行更新。

可能是

<Route 
  path="/project/:id/search" 
  render={({ match: {params: {id} } })=> <SearchPage key={id} />} 
/>

对我来说，这以不良的方式影响可读性。因此，使用componentDidUpdate（willReceiveProps is deprecated）似乎更易于维护。

当路由参数改变时，确保组件重新初始化

1 个答案: