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

How do I reload a page with react-router?

提问by Sheriff

I can see in this file (https://github.com/ReactTraining/react-router/blob/v0.13.3/modules/createRouter.js) that there is a refresh function but I have no idea how to call it. I'm fairly new to react-router, I've only used it to move between some pages a couple times using hashHistory.

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

Right now I am trying to use it so that when an install fails, the user is given the option to 'retry' which I plan to execute by refreshing the page where the install happens (the page the user would be currently on). Any help would be appreciated.

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

This is a node app that runs on electron, not a web app.

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

回答by Austin Greco

You don't really need react-routerfor this. You can just use location.reload:

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

location.reload();

Also that version of react-router you linked to is very old, I think it's linking to v1 when it's currently on v4.

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

回答by Sumit Kumar

You can use this to refresh Current route:

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

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

回答by Darko Pranjic

I guess that you're using react-router. I'll copy my answer from another post. So you have few possibilities to do that, currently my favorite way to do that is using anonymous function in component prop:

我猜你正在使用反应路由器。我会从另一个帖子复制我的答案。所以你几乎没有办法做到这一点，目前我最喜欢的方法是在组件 prop 中使用匿名函数：

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

Or if you want to refresh with current url params, you'll need extra route (reload), and play a little with router stack:

或者，如果您想使用当前的 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>

回答by sambalicious

firstly, add react-router as a dependency

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

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

import { useHistory} from 'react-router

const history = useHistory()

const history = useHistory()

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

history.go()

history.go()

This causes your page to re-render automatically

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

回答by Alessander Fran?a

You could try thisworkaround:

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

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

回答by Behnam Azimi

If you don't want to reload all scripts again you can replace the current path with a fake/empty path and replace it again with the current path like this

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

// ...
let currentPath = window.location.pathname;
history.replace('/your-empty-route');
setTimeout(() => {
    history.replace(currentPath)
}, 0)
// ...

Update:

更新：

If the changing of the address bar bothering, you can add a patterned route like this:

如果地址栏的更改很烦人，您可以添加这样的模式路由：

<Route path="/*/reload" component={null}/>

and add /replaceto the end of currentPathto replace the router with null component. like this:

并添加/replace到末尾currentPath以用空组件替换路由器。像这样：

// ...
let currentPath = window.location.pathname;
history.replace(`${currentPath}/replace`);
setTimeout(() => {
    history.replace(currentPath)
}, 0)
// ...

In this way, the reloadkeyword will add to the end of your current path and I think it's more user friendly.

这样，reload关键字将添加到您当前路径的末尾，我认为它对用户更友好。

Notice: If you already have a route that ends with replaceIt will cause conflict. To solve that you should change the path of the patterned route to something else.

注意：如果你已经有一个以replace结尾的路由会导致冲突。要解决这个问题，您应该将模式化路线的路径更改为其他内容。

回答by Gintaras Volkvi?ius

If you want to use <Link/>to reload some route, or simply have single history push, you can setup <Redirect/>route under <Switch/>like this:

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

<Switch>
    <Route exact path="/some-route" component={SomeRoute} />
    <Redirect exact from="/some-route/reload" to="/some-route" />
</Switch>

And then <Link to="/some-route/reload" />or push("/some-route/reload")

然后<Link to="/some-route/reload" />或push("/some-route/reload")

回答by Navnath Adsul

May be you are trying to push in history object, then bind your component with withrouteror use window.location.href = urlto redirect ..

可能是您试图推入历史对象，然后将您的组件与withrouter或用于window.location.href = url重定向 ..

回答by Ziming Dong

I'm using Django with React router. I added a urlpattern in Django so every mismatch url will redirect to the React router root page, it just works.

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

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

回答by ahmetsadri

React

反应

window.location.reload();

working

在职的