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

Posted 2023-02-21

【中文标题】如何使用 react-route 链接刷新页面

【英文标题】：How to refresh a Page using react-route Link

【发布时间】：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 我不这么认为。与其让用户处于错误状态，不如要求他重新开始。但理想情况下，我们应该在没有用户干预的情况下克服这种情况。

【参考方案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>

  );