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

Question

我正在尝试实现一个类似 facebook 的主页（即 post 列表和评论）。

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

我有另一个名为 NavBar 的导航栏组件，其中有一个 <Link> 组件（来自 react-router-dom）到我的 HomePage 组件（'/' ).

当我在“/”以外的任何页面上时，使用 link 工作正常：路由器装载 HomePage，然后 PostList 触发 componentDidMount() 并显示新检索的 posts.

但是当我已经在“/”上时，Link 什么都不做，因为我已经在“/”上了，但我希望它仍然重新加载我的组件 HomePage因此它可以更新其 post 列表。

我该怎么做？

Answer 1

React 组件仅在给定不同 props（或 state 更改时）才重新呈现。
我有一个类似于你的问题，我通过每次向组件传递一个 timestamp 道具来解决它。这为我解决了这个问题。所以在你的 <Router> 组件中，你定义了 Home 组件的路由，使用下面的代码：

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

这样，timestamp 道具会在后续点击时发生变化，并且组件会在您每次点击 <Link> 时重新呈现。

Answer 2

我今天正在解决类似的问题。我有路线：

<Route exact path="/:id" render={({ match }) => (<MyComponent match={match} />)} />

和 link 如果 newId 与呈现的相同 id:

则不会调用重新加载

<Link to={{ pathname: `/${newId} }} >Go</Link>

我找到的最简单的解决方案是添加新的重新加载重定向（就在路由下方）：

<Redirect from="/:id/reload" to="/:id" />

并将 newId === id 的 link 更改为

<Link to={{ pathname: `/${id}/reload` }} >Reload</Link>

我还找到了一个解决方案添加带有时间戳的新路由（如1567430708808）：

<Route exact path="/:id/:ts" render={({ match }) => (<MyComponent match={match} />)} />

并从 match 对象中读取钩子，但时间戳出现在 URL 中，它不如重定向好。我需要提到我使用 react-router 5.0.1.

Reload component via <Link> in React Router