reactjs - 在 React Router 中通过 重新加载组件

Question

我正在尝试实现一个类似 facebook 的主页(即带有评论的帖子列表)。

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

我还有另一个导航栏组件，名为 NavBar与 <Link>组件(来自 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} />
)}/>

这样，timestamp后续单击时 prop 会发生变化，并且每次单击 <Link> 时组件都会重新渲染.