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

Question

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

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

这是在 electron 上运行的节点应用程序，而不是 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

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

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

Answer 3

为此，您实际上并不需要react-router 。 你可以只使用location.reload ：

location.reload();

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

Answer 4

如果您使用的是 react-router v6

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

const navigate = useNavigate();

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

Answer 5

我猜你正在使用反应路由器。 我会从另一个帖子复制我的答案。 所以你几乎没有办法做到这一点，目前我最喜欢的方法是在组件 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 6

反应

window.location.reload();

工作

Answer 7

如果你想使用<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")

Answer 8

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

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

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

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

Answer 9

你可以试试这个解决方法：

// I just wanted to reload a /messages page
history.pushState(null, '/');
history.pushState(null, '/messages');

Answer 10

如果您不想再次重新加载所有脚本，您可以用假/空路径替换当前路径，然后用当前路径再次替换它，如下所示

// ...
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结尾的路由会导致冲突。 要解决这个问题，您应该将模式化路线的路径更改为其他内容。

Answer 11

可能是您正在尝试推送历史对象，然后将您的组件与withrouter绑定或使用window.location.href = url重定向..

Answer 12

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

只需将该属性放在您的路由器上，无论何时您处于新路径上，它都会强制页面重新加载自身。

<Router forceRefresh={true}>

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

Answer 13

更新 webpacker.yml

  devServer: {
    historyApiFallback: true,
  }

Answer 14

您可以使用此功能。

 function reloadPage(){ window.location.reload(); }

 <input type="button" onClick={ reloadPage } value="reload"/>

Answer 15

好吧，最简单的方法是首先确定重新加载的路由，然后在路由上调用window.location.reload()函数，如下所示：

<Switch>
  <Route exact exact path="/" component={SomeComponent} />
  <Route path="/reload" render= {(props)=>window.location.reload()} />
</Switch>

Answer 16

我最近遇到了同样的问题并创建了这个（ https://github.com/skt-t1-byungi/react-router-refreshable ）。

<Refreshable>
    <Switch>
        <Route path="/home">
            <HomePage />
        </Route>
        <Route path="/post">
            <PostPage />
        </Route>
        {/* ... */}
    </Switch>
</Refreshable>

Answer 17

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

import { useLocation } from 'react-router'

const location = useLocation()

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

Answer 18

如果您需要异步重新加载，请使用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 (
    ...
  );
};

Answer 19

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

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

 const navigate = useNavigate()

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

Answer 20

这依赖于反应路由器 dom 5.2.0。

Answer 21

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

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

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