如何使用 react-router 重新加载页面?

IT技术 javascript reactjs react-router electron
2021-04-12 08:53:44

我可以在这个文件(https://github.com/ReactTraining/react-router/blob/v0.13.3/modules/createRouter.js)中看到有一个刷新功能,但我不知道如何调用它。我对react-router相当陌生,我只使用它使用 hashHistory 在某些页面之间移动几次。

现在我正在尝试使用它,以便当安装失败时,用户可以选择“重试”,我计划通过刷新发生安装的页面(用户当前所在的页面)来执行该选项。任何帮助,将不胜感激。

这是一个在电子上运行的节点应用程序,而不是一个网络应用程序。

6个回答

首先,添加 react-router 作为依赖

`yarn add react-router` or `npm install react-router`

import { useHistory } from 'react-router'

const history = useHistory()

/////then add this to the function that is called for re-rendering

history.go(0)

这会导致您的页面自动重新呈现

我正在使用 React 和 Express.js 构建一个 Web 应用程序,这个建议对我来说就像一个魅力。干杯
2021-06-04 08:53:44
如果您在处理身份验证状态的 onClick 事件中删除了 cookie,则此方法有效,并且history.go()我按预期注销并推送到登录屏幕。其他答案没有按我的预期工作..
2021-06-10 08:53:44
不是真正的SPA方法。我认为这个建议应该受到批评
2021-06-17 08:53:44

您可以使用它来刷新当前路线:

import createHistory from 'history/createBrowserHistory'
const history = createHistory();
history.go(0)
这会导致整页重新加载
2021-06-12 08:53:44
如果您使用钩子,则类似 - 这适用于 react-router-dom 中的 useHistory。但是,是的,完全重新加载页面
2021-06-17 08:53:44

你真的不需要react-router这个。你可以只使用location.reload

location.reload();

此外,您链接到的那个版本的 react-router 很旧,我认为它当前在 v4 上时正在链接到 v1。

与使用路由器方法相比,使用此方法会丢失任何缓存数据(例如 Apollo)。
2021-06-02 08:53:44
这里的其他答案,如 history.pushState(null, '/'); 更好,恕我直言
2021-06-08 08:53:44
啊有道理。问题是当它调用location.reload()它在我的浏览器上打开文件时,但我正在开发一个电子应用程序,所以它需要在应用程序中重新加载。
2021-06-14 08:53:44
不是真正的SPA方法。我认为这个建议应该受到批评
2021-06-17 08:53:44
@SashaKos 有时应该采用这种方法,例如当我们部署新版本的 SPA 应用程序并且我们希望维护模式离线组件(我们向用户展示)导致整页刷新和获取新版本的 SPA 应用程序(一旦我们将维护模式设置为关闭)。请注意,为了no-restricted-globals使用此代码解决错误(例如,在使用 Create React App 时),它应该读取window.location.reload().
2021-06-20 08:53:44

我猜你正在使用react-router。我将从另一个帖子中复制我的答案。所以你几乎没有办法做到这一点,目前我最喜欢的方法是在组件 prop 中使用匿名函数:

<Switch>
  <Route exact path="/" component={()=><HomeContainer/>} />
  <Route exact path="/file/:itemPath/:refHash" component={()=><File/>} />
  <Route exact path="/:folderName" component ={()=><Folder/>}/>
</Switch>

或者,如果您想使用当前的 url 参数刷新,则需要额外的路由(重新加载),并使用路由器堆栈进行一些操作:

reload = ()=>{
 const current = props.location.pathname;
 this.props.history.replace(`/reload`);
    setTimeout(() => {
      this.props.history.replace(current);
    });
}

<Switch>
  <Route path="/reload" component={null} key="reload" />
  <Route exact path="/" component={HomeContainer} />
  <Route exact path="/file/:itemPath/:refHash" component={File} />
  <Route exact path="/:folderName" component ={Folder}/>
</Switch>

<div onClick={this.reload}>Reload</div>
@DawsonB 我不知道,但没有它就行不通..大声笑
2021-05-25 08:53:44
为什么setTimeout这里需要?
2021-06-13 08:53:44

react

window.location.reload();

在职的

那会变成无限循环,小心
2021-05-31 08:53:44