Question

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

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

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

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 funtion that that is called for re-rendering

history.go(0)

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

Answer 2

你真的不需要react-router。您可以使用location.reload：

location.reload();

您链接到的反应路由器的版本也很老，我认为当v4当前在v4上时它会链接到v1。

Answer 3

反应

window.location.reload();

工作

Answer 4

如果您想使用<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 5

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

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

因此，想法是：在页面周围创建包装器，并在每次位置键更改时使React重新创建实际页面。

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

Answer 6

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

您可以尝试this解决方法：

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

Answer 8

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

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

Answer 9

如果您不想再次重新加载所有脚本，可以将当前路径替换为伪/空路径，然后再次将其替换为当前路径

// ...
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 10

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

只需将该属性放在您的路由器上，只要您在新路径上它就会强制页面重新加载自己。< /p>

<Router forceRefresh={true}>

<块引用>

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

Answer 11

可能是您要插入历史记录对象，然后将组件与withrouter绑定，或使用window.location.href = url来重定向..

Answer 12

我将Django与React Router一起使用。我在Django中添加了一个urlpattern，因此每个不匹配的url都将重定向到React路由器的根页面，它可以正常工作。

urlpatterns += [
    url(r'^.*', yourviewclass, name='home')
]

Answer 13

更新webpacker.yml

  devServer: {
    historyApiFallback: true,
  }

Answer 14

嗯，最简单的方法是首先确定重新加载的路由，然后像这样在路由上调用 window.location.reload() 函数：

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

Answer 15

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

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

Answer 16

您可以使用此功能。

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

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

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

16 个答案: