Wie lade ich eine Seite mit React-Router neu?

Ich kann in dieser Datei sehen (https://github.com/ReactTraining/react-router/blob/v0.13.3/modules/createRouter.js), dass es eine Aktualisierungsfunktion gibt, aber ich habe keine Ahnung, wie ich sie aufrufen soll. Ich bin ziemlich neu im React-Router, ich habe ihn nur verwendet, um ein paar Mal mit hashHistory zwischen einigen Seiten zu wechseln.

Im Moment versuche ich, es so zu verwenden, dass der Benutzer beim Fehlschlagen einer Installation die Option erhält, es erneut zu versuchen, was ich ausführen möchte, indem ich die Seite aktualisiere, auf der die Installation stattfindet (die Seite, auf der sich der Benutzer gerade befindet). Jede Hilfe wäre willkommen.

Dies ist eine Node-App, die auf Elektron läuft, keine Web-App.

Fügen Sie zunächst den React-Router als Abhängigkeit hinzu

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

import { useHistory } from 'react-router'

const history = useHistory()

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

history.go(0)

Dadurch wird Ihre Seite automatisch neu gerendert

Verwenden Sie für den React-Router V6 stattdessen den useNavigate-Hook

import { useNavigate } from 'react-router'

const navigation = useNavigate()

navigieren(0)

Wenn Sie React-Router v6 verwenden

import { useNavigate } from "react-router-dom";

const navigate = useNavigate();

const refreshPage = () => {
    navigate(0);
}

Sie können dies verwenden, um die aktuelle Route zu aktualisieren:

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

Brauchst du nicht wirklich react-router dafür. Sie können einfach verwenden location.reload:

location.reload();

Auch die Version von React-Router, mit der Sie verknüpft sind, ist sehr alt. Ich denke, sie verknüpft mit v1, wenn sie derzeit auf v4 ist.

Ich vermute, dass Sie React-Router verwenden. Ich kopiere meine Antwort aus einem anderen Beitrag. Sie haben also nur wenige Möglichkeiten, dies zu tun. Derzeit verwende ich am liebsten die anonyme Funktion in der Komponenten-Prop:

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

Oder wenn Sie mit aktuellen URL-Parametern aktualisieren möchten, benötigen Sie eine zusätzliche Route (neu laden) und spielen ein wenig mit dem 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="https://stackoverflow.com/" component={HomeContainer} />
  <Route exact path="/file/:itemPath/:refHash" component={File} />
  <Route exact path="/:folderName" component ={Folder}/>
</Switch>

<div onClick={this.reload}>Reload</div>

Reagieren

window.location.reload();

Arbeiten

Wenn Sie die Daten erneut abrufen möchten, gehen Sie einfach wie folgt vor:

import { useLocation } from 'react-router'

const location = useLocation()

useEffect(() => {
  fetchData()
}, [location.key])