通过React Router中的<Link>重新加载组件

Question

我正在尝试实现类似Facebook的主页(即带有评论的帖子列表).

PostList是负责加载帖子列表的组件(使用其中的fetch componentDidMount()),它本身就是组件的子组件HomePage.

我有一个导航栏的另一个组件,NavBar用<Link>组件(from react-router-dom)调用我的HomePage组件路径('/').

当我在"/"以外的任何页面上时,使用链接工作正常:路由器安装HomePage,然后PostList触发componentDidMount()并显示刚刚检索到的帖子.

但是当我已经在'/'时,链接什么也没做,因为我已经在'/',但我希望它仍然重新加载我的组件,HomePage以便它可以更新其帖子列表.

我该怎么做 ？

Answer 1

React组件仅在给定不同props(或state更改时)时重新呈现.
我有一个类似于你的问题,我通过timestamp每次都将支柱传递给组件来解决它.这解决了我的问题.因此,在<Router>组件中,您为Home组件定义路由,请使用以下代码:

<Route path='/' component={ (props) => (
  <Home timestamp={new Date().toString()} {...props} />
)}/>

这样,timestampprop就会随后更改点击次数,并且每次单击时组件都会重新渲染<Link>.