如何使用 react-route 链接刷新页面答案

【问题标题】：How to refresh a Page using react-route Link如何使用 react-route 链接刷新页面
【发布时间】：2017-05-19 18:56:10
【问题描述】：

我正在尝试使用 react-route 链接刷新页面。但是我实现它的方式会退回到 URL。（例如，如果 URL 是 ../client/home/register 并且当我按下重新加载时会转到 ../client/home）

下面是我的代码

const AppErrorPage = () => (
    <div>
    <div style={ styles.container }>
        <h2>Error</h2>
        <p> Something went wrong, please reload the page </p>
        <div>
         <Link to="" refresh="true">
            <span>Reload</span>
          </Link>
        </div>
    </div>
    </div>  
);

【问题讨论】：

为什么要重新加载页面？
@JyothiBabuAraja 看着这个例子，似乎发生了错误，所以提示用户重新加载并不是一个坏主意。
@aug 我不这么认为。与其让用户处于错误状态，不如要求他重新开始。但理想情况下，我们应该在没有用户干预的情况下克服这种情况。

标签： javascript reactjs react-router

【解决方案1】：

刷新页面不需要react-router，简单的js：

window.location.reload();

要在 React 组件中重新渲染视图，您可以使用 props/state 触发更新。

【讨论】：

我实际上已将其重构为将其用作按钮，但现在我收到错误消息“预期 onClick 侦听器是一个函数，而不是类型字符串”
<button type="button" onClick="refreshPage()"> <span>Reload</span> </button> function refreshPage(){ window.parent.location = window.parent.location.href; }
你输入了onClick值作为字符串，使用这个：onClick={refreshPage}或onClick={() => refreshPage()}

【解决方案2】：

像这样试试。

你必须给onClick()一个函数作为值

你的按钮：

<button type="button" onClick={ refreshPage }> <span>Reload</span> </button>

刷新页面功能：

function refreshPage(){ 
    window.location.reload(); 
}

【讨论】：

这是错误的，因为函数会在渲染过程中被调用。检查我的答案下的 cmets
@LukasLiesis 谢谢你只是忽略了。更新了

【解决方案3】：

你可以用这个

<a onClick={() => {window.location.href="/something"}}>Something</a>

【讨论】：

【解决方案4】：

我最终保留了 Link 并将重新加载添加到 Link 的 onClick 事件中，超时如下：

function refreshPage() {
    setTimeout(()=>{
        window.location.reload(false);
    }, 500);
    console.log('page to reload')
}

<Link to={{pathname:"/"}} onClick={refreshPage}>Home</Link>

没有超时，刷新功能会先运行

【讨论】：

【解决方案5】：

使用window.location.reload()重新加载当前窗口

<a onClick={() => {window.location.reload()}}>
  Reload the page
</a>

【讨论】：

【解决方案6】：

这是一种使用 React Bootstrap 和一个组件的方法，您可以将其放入任何页面...

import Button from 'react-bootstrap/Button';

export const RefreshCurrentPage = () => {

  function refreshPage(){ 
    window.location.reload(); 
  }

  return (
    <div className="row">
      <Button onClick={ refreshPage } variant="secondary" size="sm" className="btn ml-4">Refresh Page</Button>
    </div>

  );

}

【讨论】：