Javascript 如何使用react路由器链接组件重新加载页面？

我有一个组件

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

export const NetworkStatus=（{}）=>(
单击此处刷新页面
)

---

在这里，我尝试使用react router的链接重新加载页面。但这似乎不起作用。如何解决此问题？

使用按钮重新加载页面：

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

---

使用按钮重新加载页面：

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

---

通过向链接组件添加onClick属性事件处理程序，可以模拟链接组件的行为。然后使用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>

//选项1使用React路由器的历史api
从“历史记录/createBrowserHistory”导入createHistory
const history=createHistory（）；
...
history.go（0）}>单击此处刷新页面
//选项2使用浏览器窗口api
window.location.reload（）}>单击此处刷新页面

通过向链接组件添加onClick属性事件处理程序，可以模拟链接组件的行为。然后使用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>

//选项1使用React路由器的历史api
从“历史记录/createBrowserHistory”导入createHistory
const history=createHistory（）；
...
history.go（0）}>单击此处刷新页面
//选项2使用浏览器窗口api
window.location.reload（）}>单击此处刷新页面

是的，我可以用它。。但是有没有办法用这个链接是的我可以用这个。。但是，您传递的链接“window.location.reload”作为一个静态字符串，您需要读取变量的值，因为您在case window.location.reload中的花括号{myVariable}之间传递变量。reload是一个方法，而不是一个变量，您可以使用类似onClick的事件处理程序调用它，例如，您正在传递的“window.location.reload”作为一个静态字符串，需要读取变量的值，以便在花括号{myVariable}之间传递变量在您的示例中，window.location.reload是一个方法而不是变量，您可以使用事件处理程序（例如onClick）调用它。在使用第二种方法后，它会出现键入错误，没有重载与此调用匹配。重载1/2’（props:Readonly）：Link’会出现以下错误。类型“void”不可分配给类型（事件：MouseEvent）=>void'.重载2/2'（props:LinkProps，context？：any）：Link'，出现以下错误。类型“void”不可分配给类型“（事件：MouseEvent）=>void'.ts（2769）您在呈现过程中调用这些方法，而不是在单击链接时提供调用这些方法的回调。在这里，使用第二种方法后，它给出的输入错误与此调用不匹配。重载1/2’（props:Readonly）：link’给出了以下错误。类型“void”不可分配给类型（事件：MouseEvent）=>void'。重载2/2'（props:LinkProps，context？：any）：Link'，出现以下错误。Type'void'不可分配给Type'（event:MouseEvent）=>void'。ts（2769）您在呈现期间调用这些方法，而不是在单击链接时提供调用它们的回调。