How do I reload a page with react-router?

问题:

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.

回答1:

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.

回答2:

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>

回答3:

You can use this to refresh Current route:

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

回答4:

You could try this workaround:

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

回答5:

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

回答6:

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')
]