Question

我正在尝试实施类似Facebook的主页（即包含评论的帖子列表）。

PostList是负责加载帖子列表的组件（使用其componentDidMount()中的提取），它本身是组件HomePage的子组件。

我有一个名为NavBar的导航栏的另一个组件，其中<Link>组件（从react-router-dom）到我HomePage组件的路径（'/'）。

当我在'/'以外的任何页面上时，使用链接工作正常：路由器挂载HomePage，然后PostList触发componentDidMount()并显示刚刚检索到的讯息。

但是当我已经在'/'时，Link没有做任何事情，因为我已经在'/'，但我希望它仍然可以重新加载我的组件HomePage，以便它可以更新其帖子列表。

我该怎么做？

Answer 1

只有当React组件被赋予不同的import tkinter root = tkinter.Tk() canvas = tkinter.Canvas(root) canvas.pack() def get_coordinates(event): canvas.itemconfigure(tag, text='({x}, {y})'.format(x=event.x, y=event.y)) canvas.bind('<Motion>', get_coordinates) canvas.bind('<Enter>', get_coordinates) # handle <Alt>+<Tab> switches between windows tag = canvas.create_text(10, 10, text='', anchor='nw') root.mainloop()时（或者当props更改时），它才会重新呈现。
我有一个类似于你的问题，我每次都通过state道具传递给组件来解决它。这解决了我的问题。因此，在timestamp组件中定义<Router>组件的路由时，请使用以下代码：

Home

这样，<Route path='/' component={ (props) => ( <Home timestamp={new Date().toString()} {...props} /> )}/>道具会在后续点击中发生变化，每次点击timestamp时该组件都会重新渲染。

Answer 2

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

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

，如果newId与呈现的id相同，则不会调用重新加载的链接：

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

我找到的最简单的解决方案是添加新的重新加载重定向（位于路线正下方）：

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

，并将newId === id的链接更改为

<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。

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

2 个答案: