链接重定向到路由，但不刷新组件

Posted 2023-02-22

【中文标题】链接重定向到路由，但不刷新组件

【英文标题】：Link redirects to a route but it does not refresh component

【发布时间】：2021-09-08 22:40:16

【问题描述】：

我在 JSX 中使用链接，如下所示

<Link to='/dashboard'>Close</Link>

这会将我重定向到/dashboard 路由，但不会刷新仪表板组件。我该如何解决这个问题？

【问题讨论】：

你能详细说明一下吗？你提到的可能有多种情况，你到底发生了什么？

@arslanshahab 我解释了它，链接将我重定向到正确的路线 /dashboard 但它不会刷新仪表板组件。我希望刷新仪表板组件，以便它从 api 获取最新数据。

@Om3ga 您可能希望使用生命钩子或 useEffect 来监视您的组件并在组件安装时适当地获取数据。如果你分享你的实现，我会容易得多。

没有 MRE 我们无法回答这个问题。

可能重复，但由于细节有限无法确定：***.com/questions/67974247/…

【参考方案1】：

也许您应该在您的dashboard component 中使用useEffect

useEffect(()=> 
// your code…
, [])

在[]里面可以添加一些依赖

【讨论】：

如果您希望组件在渲染时显示一些数据，这应该可以工作。 @om3ga

【参考方案2】：

好的，首先检查你指定的路径名​​是否与你给<Link to='/dashboard' />组件的路径名匹配

在这种情况下，斜线通常是导致问题的错误，因为如果结构不正确，它可能会导致重定向到另一个页面。 检查斜线结构是否与路由器路由组件中的结构相匹配。 <Route path='yourUrl' />

其次，如果它匹配，那么就像@priscilla-joly 说的那样。 如果你使用 react hooks，你需要添加一个 useEffect 函数

useEffect(()=> 
// your code…
, [])

如果您使用的是类，则为 componentDidMount() 方法。

componentDidMount = () =>
// your code here


or 

componentDidMount()
// your code here

如果您使用componentDidMount() // your code here ，请确保您首先在类构造方法中绑定它

【讨论】：

我删除了/ 部分，但它仍然无法正常工作。我也使用了componentDidMount，但它不起作用。

不，我没有要求您删除/，我要求您交叉检查路径结构是否匹配。如果不匹配，那么componentDidMount 也不起作用

你的路由组件中的路径是怎么写的。你能发布你的路由器结构的完整代码吗？