如何使用React Router Link组件重新加载页面？

问题描述

我有一个组件

export const NetworkStatus = ({ }) => (
     <div>
       <Link to="window.location.reload">Click here to refresh page</Link>
     </div>
  )

在这里，我正在尝试使用react-router的Link重新加载页面。但这似乎不起作用。该如何解决？

解决方法

使用按钮来重新加载页面：

export const NetworkStatus = ({ }) => (
     <div>
       <button onClick={_ => window.location.reload()}>Click here to refresh page</Button>
     </div>
  )

编辑： 如果您想使用Link组件来处理相同的内容，可以按照以下步骤操作：

<Link onClick={e => {
    e.preventDefault();
    window.location.reload()
}}>Click here to refresh page</Link>

,

您可以通过向Link组件添加onClick属性事件处理程序来模仿Link组件的行为。然后要么使用来自React Router的历史API，要么简单地使用window.location.reload（）API调用。无论哪种方式，您都需要为预期的行为调用函数。

// option 1 using history api from React router
import createHistory from 'history/createBrowserHistory'
const history = createHistory();
...
<Link onClick={() => history.go(0)}>Click here to refresh page</Link>

// option 2 use browser window api 
<Link onClick={() => window.location.reload()}>Click here to refresh page</Link>