reactjs React Link不会刷新页面

v2g6jxz6  于 5个月前  发布在  React
关注(0)|答案(6)|浏览(94)

我有这个代码:
第一个月
作为我的应用程序的一部分,但如果我当前正在查看/dashboard路由,页面不会刷新。
为什么?我怎样才能使它刷新?

1aaf6o9v

1aaf6o9v1#

您可以尝试强制刷新,或者使用:

<Link to="/dashboard" onClick={this.forceUpdate} style={{ color: '#A4A4A4'}}>Dashboard</Link>

字符串

<Link to="/dashboard" onClick={() => window.location.reload()} style={{ color: '#A4A4A4' }}>Dashboard</Link>


您还可以向onClick方法添加逻辑,以检查您当前所在的页面,并仅在您位于 Jmeter 板上时进行刷新。

omvjsjqw

omvjsjqw2#

如果你使用这个,它将转到链接,也重新加载

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

字符串

pnwntuvh

pnwntuvh3#

从概念上讲,如果你的浏览器栏已经在“/dashboard”上,并且你试图导航到那里,那么你不应该期望任何更新。如果你确实知道下面的内容发生了变化,那么你需要告诉React页面的哪些部分发生了变化。你可以通过以下方式做到这一点:
1.更改组件参数
1.使用带有useState钩子的set-state方法
1.如果你通过useEffect()获取数据,那么给予一个非空的依赖列表给“useEffect()”(它的第二个参数)
1.添加一个“onClick”处理程序来获取数据,然后将数据(或其时间戳或哈希)放入useState()中。
其他的答案建议你做一个完整的页面刷新,但这不是一个好的风格.它使用大锤来解决你的问题,并带来自己的问题,如你失去状态和做更多的重新呈现比需要。

qfe3c7zg

qfe3c7zg4#

我将使用react-router-dom版本6来实现这个示例:
1.在开始之前,请确保您拥有正确的版本#
$ yarn add react-router-dom@6$ npm install react-router-dom@6
1.请按照以下代码获取详细信息:x1c 0d1x
需要注意的是,我在router标签中有我的link标签。我相信这对于导航到相应的route路径是很重要的。你可以通过这样的导航组件来做到这一点(为了获得更多的上下文,我添加了我的文件夹结构):


q8l4jmvw

q8l4jmvw5#

当你转到同一个页面时,它不会刷新。
您可以使用<Link reloadDocument>跳过客户端路由,让浏览器正常处理转换(就像它是<a href>一样)。
<Link reloadDocument to="/dashboard" style={{ color: '#A4A4A4' }}>Dashboard</Link>

yvt65v4c

yvt65v4c6#

根据Ferdousis的回答,如果你想使用链接组件,这对我来说很有效:

<Link
            to="/companies"
            onClick={() => {
              window.location.href = "/companies";
            }}
          >
            Start over
          </Link>

字符串

相关问题