How do I reload a page with react-router?

2020-02-09 09:32发布

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.

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.

6条回答
我命由我不由天
2楼-- · 2020-02-09 10:03

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.

urlpatterns += [
    url(r'^.*', yourviewclass, name='home')
]
查看更多
家丑人穷心不美
3楼-- · 2020-02-09 10:05

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:

<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:

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>
查看更多
爱情/是我丢掉的垃圾
4楼-- · 2020-02-09 10:07

You could try this workaround:

// I just wanted to reload a /messages page
history.pushState(null, '/');
history.pushState(null, '/messages');
查看更多
该账号已被封号
5楼-- · 2020-02-09 10:08

You can use this to refresh Current route:

import createHistory from 'history/createBrowserHistory'
const history = createHistory();
history.go(0)
查看更多
beautiful°
6楼-- · 2020-02-09 10:16

You don't really need react-router for this. You can just use 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.

查看更多
虎瘦雄心在
7楼-- · 2020-02-09 10:21

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

查看更多
登录 后发表回答