web-dev-qa-db-fra.com

Comment recharger une page avec react-router?

Je peux voir dans ce fichier ( https://github.com/ReactTraining/react-router/blob/v0.13.3/modules/createRouter.js ) qu'il existe une fonction d'actualisation, mais je ne sais pas du tout comment appeler. Je suis assez nouveau pour réagir-routeur, je ne l'ai utilisé que pour me déplacer d'une page à l'autre à l'aide de hashHistory. 

En ce moment, j'essaie de l'utiliser de sorte que lorsqu'une installation échoue, l'utilisateur ait la possibilité de "réessayer" que je prévois d'exécuter en actualisant la page où l'installation a lieu (la page sur laquelle l'utilisateur se trouve actuellement). Toute aide serait appréciée.

Ceci est une application de noeud qui fonctionne sur electron, pas une application web.

javascriptreactjsreact-routerelectron
4
Sheriff

Vous n'avez pas vraiment besoin de react-router pour cela. Vous pouvez simplement utiliser location.reload :

location.reload();

De plus, la version de react-routeur à laquelle vous êtes lié est très ancienne, je pense qu’elle relie à la v1 quand elle est actuellement sur la v4.

5
Austin Greco

Je suppose que vous utilisez react-router. Je recopierai ma réponse d’un autre article . Vous n’avez donc que très peu de possibilités de le faire. Actuellement, ma méthode préférée consiste à utiliser la fonction anonyme dans le composant prop: 

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

Ou si vous souhaitez actualiser avec les paramètres d'URL actuels, vous aurez besoin d'une route supplémentaire (rechargement) et jouerez un peu avec la pile de routeurs:

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>
1
Darko Pranjic

Vous pouvez essayer ceci solution de contournement:

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

Vous pouvez utiliser ceci pour actualiser l'itinéraire actuel:

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