我可以在这个文件 (https://github.com/ReactTraining/react-router/blob/v0.13.3/modules/createRouter.js) 中看到有一个刷新功能，但我不知道如何调用它。我对 react-router 还很陌生，我只使用 hashHistory 在某些页面之间移动了几次。
现在我正在尝试使用它，以便在安装失败时为用户提供“重试”选项，我计划通过刷新安装发生的页面（用户当前所在的页面）来执行该选项）。任何帮助将不胜感激。
这是一个在电子上运行的节点应用程序，而不是网络应用程序。
【问题讨论】：
标签： javascript reactjs react-router electron
首先，添加 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)
这会导致您的页面自动重新呈现
【讨论】：
history.go() 我按预期注销并推送到登录屏幕。其他答案对我来说没有按预期工作..
您可以使用它来刷新当前路线：
import createHistory from 'history/createBrowserHistory'
const history = createHistory();
history.go(0)
【讨论】：
您实际上并不需要 react-router。你可以使用location.reload:
location.reload();
您链接到的那个 react-router 版本也很旧，我认为它当前在 v4 上时正在链接到 v1。
【讨论】：
location.reload() 时，它会在我的浏览器上打开文件，但我正在开发一个电子应用程序，因此它需要在应用程序中重新加载。
no-restricted-globals 错误（例如，使用 Create React App 时），它应为 window.location.reload()。
我猜你正在使用 react-router。 我将从另一篇文章中复制我的答案。 所以你几乎没有可能这样做，目前我最喜欢的方法是在组件属性中使用匿名函数：
<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>
【讨论】：
setTimeout？
反应
window.location.reload();
工作
【讨论】：
如果你想使用<Link/>重新加载一些路由，或者只是单条历史推送，你可以在<Switch/>下设置<Redirect/>路由，如下：
<Switch>
<Route exact path="/some-route" component={SomeRoute} />
<Redirect exact from="/some-route/reload" to="/some-route" />
</Switch>
然后是<Link to="/some-route/reload" /> 或push("/some-route/reload")
【讨论】：
此解决方案不会导致不需要的整页重新加载，但需要您对需要刷新的每个页面进行此修改：
export const Page = () => {
const location = useLocation();
return <PageImpl key={location.key} />
}
所以想法是：在页面周围创建一个包装器，并让 React 在每次位置键更改时重新创建实际页面。
现在只需再次调用history.push(/this-page-route) 即可刷新页面。
【讨论】：
您可以尝试this 解决方法：
// I just wanted to reload a /messages page
history.pushState(null, '/');
history.pushState(null, '/messages');
【讨论】：
hashHistory.push('/somewhere')
如果您不想再次重新加载所有脚本，您可以将当前路径替换为假/空路径，然后再次将其替换为当前路径，如下所示
// ...
let currentPath = window.location.pathname;
history.replace('/your-empty-route');
setTimeout(() => {
history.replace(currentPath)
}, 0)
// ...
更新：
如果地址栏的变化很麻烦，你可以像这样添加一个带图案的路由：
<Route path="/*/reload" component={null}/>
并将/replace 添加到currentPath 的末尾以将路由器替换为空组件。像这样：
// ...
let currentPath = window.location.pathname;
history.replace(`${currentPath}/replace`);
setTimeout(() => {
history.replace(currentPath)
}, 0)
// ...
这样，reload 关键字将添加到您当前路径的末尾，我认为它对用户更友好。
注意：如果你已经有一个以replace结尾的路由会引起冲突。为了解决这个问题，您应该将模式化路线的路径更改为其他内容。
【讨论】：
可能你正试图推入历史对象，然后用withrouter 绑定你的组件或使用window.location.href = url 重定向..
【讨论】：
你可以使用这个功能。
function reloadPage(){
window.location.reload();
}<input type="button" onClick={ reloadPage } value="reload"/>【讨论】：
我知道这是旧的，但我根据react-router的文档找到了一个简单的解决方案。
只需将该属性放在您的路由器上，每当您在新路径上时，它都会强制页面重新加载自身。
<Router forceRefresh={true}>
来源： https://reactrouter.com/web/api/BrowserRouter/forcerefresh-bool
【讨论】：
更新 webpacker.yml
devServer: {
historyApiFallback: true,
}
【讨论】：
嗯，最简单的方法是首先确定要重新加载的路由，然后在该路由上调用window.location.reload() 函数，如下所示：
<Switch>
<Route exact exact path="/" component={SomeComponent} />
<Route path="/reload" render= {(props)=>window.location.reload()} />
</Switch>
【讨论】：
我最近遇到了同样的问题并创建了这个(https://github.com/skt-t1-byungi/react-router-refreshable)。
<Refreshable>
<Switch>
<Route path="/home">
<HomePage />
</Route>
<Route path="/post">
<PostPage />
</Route>
{/* ... */}
</Switch>
</Refreshable>
【讨论】：
如果您想重新获取数据，只需执行以下操作：
import { useLocation } from 'react-router'
const location = useLocation()
useEffect(() => {
fetchData()
}, [location.key])
【讨论】：
如果您需要异步重新加载，请使用history.go(0)（它包装了History.go() 方法）。
如果您需要同步重新加载页面，请使用history.push(location.pathname)（它包装了History.pushState()方法）。
由于这里已经有使用history.go(0)的示例，所以这里有一个使用history.push(location.pathname)的示例：
import React from 'react';
import { useHistory, useLocation } from 'react-router-dom';
const Component = () => {
const history = useHistory();
const location = useLocation();
const reload = () => {
history.push(location.pathname);
};
return (
...
);
};
【讨论】：