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

Question

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

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

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

Answer 1

首先，添加 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)

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

Answer 2

如果您使用的是react-router v6

import { useNavigate } from "react-router-dom";

const navigate = useNavigate();

const refreshPage = () => {
    navigate(0);
}

Answer 3

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

import createHistory from 'history/createBrowserHistory'
const history = createHistory();
history.go(0)

Answer 4

如果您想重新获取数据，只需执行以下操作：

import { useLocation } from 'react-router'

const location = useLocation()

useEffect(() => {
  fetchData()
}, [location.key])

Answer 5

我知道这已经很旧了，但是我根据react-router的文档找到了一个简单的解决方案。

只需将该属性放在您的路由器上，每当您位于新路径上时，它就会强制页面自行重新加载。

<Router forceRefresh={true}>

来源： https: //reactrouter.com/web/api/BrowserRouter/forcerefresh-bool

Answer 6

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

location.reload();

你链接到的反应路由器的版本也很老,我认为当它在v4上时它会链接到v1.

Answer 7

反应

window.location.reload();

在职的

Answer 8

此解决方案不会导致不需要的整页重新加载，但要求您对需要刷新的每个页面进行此修改：

export const Page = () => {
   const location = useLocation();
   return <PageImpl key={location.key} />
}

所以想法是：在页面周围创建一个包装器，并让 React 在每次位置键更改时重新创建实际页面。

现在再次调用就足够了history.push(/this-page-route)，页面会刷新。

Answer 9

我猜您正在使用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>

Answer 10

如果你想用来<Link/>重新加载某些路由，或者只是有单个历史推送，你可以像这样设置<Redirect/>路由：<Switch/>

<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")

Answer 11

使用 React Router 6 你可以简单地编写：

import {useNavigate} from "react-router-dom";

 const navigate = useNavigate()

    const goToPageOnClick = () =>{
        navigate(target_url)
        navigate(0)
    }