webentwicklung-frage-antwort-db.com.de

Wie verwende ich den React-Router 4.0, um die aktuelle Route zu aktualisieren? nicht die ganze Seite neu laden

'react-router-dom' hat eine Aktualisierungsfunktion hier , aber ich weiß nicht, wie ich diese Methode aufrufen soll, auch ihr gut formatiertes Dokument macht sich nicht die Mühe, dies zu erklären .

window.location.reload () funktioniert bei mir nicht, da dadurch auch der App Store gelöscht wird. Ich habe einige Daten geändert und muss dann die Route mit aktualisierten Daten neu laden.

Ich habe auch folgendes gelesen: https://github.com/ReactTraining/react-router/issues/1982https://github.com/ReactTraining/react-router/issues/2243)

dieser Thread diskutiert genau meine Frage: https://github.com/ReactTraining/react-router/issues/4056

und immer noch ahnungslos, wie es geht. Diese Grundfunktion sollte nicht zu viel Aufwand erfordern, aber nachdem ich sehr viel Aufwand betrieben habe, kann ich die aktuelle Route nicht neu laden.

hier ist mein Code:

@inject('store') @observer
export default class PasswordInput extends Component {
    constructor (props) {
        super(props)
        this.setPwd = this.setPwd.bind(this)
        this.submit = this.submit.bind(this)
    }

    componentWillMount() {
        this.case = this.props.store.case

        this.setState({refresh: false})
    }
    setPwd(e) {
        // console.log(e)
        this.case.pwd = e.target.value

    }
    submit() {
        console.log(this.props.caseId)
        this.setState({refresh: true})

    }

    render() {
        return (
            <Container>
                <div>{this.state.refresh}</div>
                { (this.state.refresh) && <Redirect refresh={true} to={'/cases/' + this.props.caseId}></Redirect>}
                <br />
                <Grid columns="three">
                    <Grid.Row>
                        <Grid.Column key={2}>
                            <Form>
                                <label>Enter Password</label>
                                <input placeholder="empty"  type="text" onChange={this.setPwd} value={this.case.pwd}></input>                               

                                <Button name="Save" color="green" size="mini" 
                                style={{marginTop:'1em'}}
                                onClick={this.submit}>
                                    Submit
                                </Button>                               
                            </Form>
                        </Grid.Column>
                    </Grid.Row>
                </Grid>
            </Container>
        )
    }
}
11
Nicolas S.Xu

Ich habe dies gelöst, indem ich eine neue Route in den Verlauf verschoben und diese dann durch die aktuelle Route (oder die Route, die Sie aktualisieren möchten) ersetzt habe. Dadurch wird der React-Router veranlasst, die Route neu zu laden, ohne die gesamte Seite zu aktualisieren.

if (routesEqual && forceRefresh) {
    router.Push({ pathname: "/empty" });
    router.replace({ pathname: "/route-to-refresh" });
}

Der React Router verwendet den Browserverlauf, um zu navigieren, ohne die gesamte Seite neu zu laden. Wenn Sie eine Route erzwingen, erkennt der React Router dies und lädt die Route neu. Es ist wichtig, die leere Route zu ersetzen, damit Sie mit der Zurück-Taste nicht zur leeren Route gelangen, nachdem Sie sie eingedrückt haben.

Laut react-router sieht es so aus, als würde die React-Router-Bibliothek diese Funktionalität nicht unterstützen und wird dies wahrscheinlich auch nie tun.

4
Zach Taylor

Ich habe das gleiche Problem und habe keine Ahnung, wie die Aktualisierung funktioniert. Meine Lösung besteht darin, zwei Schritte zu befolgen.

  1. Schieben Sie neue Wege in die Geschichte
  2. alle Zustände zurücksetzen

Dann wird das DOM mit Ihrer Route neu gerendert.

1
Kwun Yeung

Hier ist meine Lösung mit "Redirect" von react-router-dom:

<Route key={props.notifications.key} path={props.notifications.path} exact render={() => <Redirect to={props.notifications.path + "/update"}/>}/>
<Route key={props.notifications.key + "/update"} path={props.notifications.path + "/update"} exact render={() => <props.notifications.component apis={props.notifications.apis}/>}/>
0
Dapeng

Nur das hat bei mir geklappt:

reloadOrNavigate = () => {
  const { history, location } = this.props;
  if (location.pathname === '/dashboard') {
    history.replace(`/reload`);
    setTimeout(() => {
      history.replace(`/dashboard`);
    });
  } else {
    history.Push('/dashboard');
  }
};

Die Antwort ist ähnlich wie die vorherige, aber ich musste die Funktion setTimeout hinzufügen, damit sie funktioniert. In meinem Fall musste ich die aktuelle URL durch Klicken auf das Logo aktualisieren, wenn ich mich auf der Seite /dashboard Befinde. Zuerst geht es zur Extra-Route /reload (Der Name liegt bei Ihnen) und kehrt dann sofort zurück. Die Seite wird für weniger als eine Sekunde weiß und mit neu geladenen Daten angezeigt. Es findet kein erneutes Laden im Browser statt. Es ist immer noch SPA, was gut ist.

0
Alexey Kutalo

Du könntest diesen kleinen Trick benutzen. Schieben Sie einen neuen Weg in der Geschichte history.Push ('/ temp') und sofort die anrufen history.goBack ()

Hier das Beispiel:

Erstellen Sie einen Verlauf und übergeben Sie ihn an den Router:

import { createBrowserHistory } from "history";

export const appHistory = createBrowserHistory();

<Router history={appHistory}>
  <Route exact path="/" component={Home} />
  <Route path="/about" component={About} />
</Router>

ändern Sie dann irgendwo in Ihrer App den Verlauf:

appHistory.Push('/temp');
appHistory.goBack();

Auf diese Weise bleibt die Route gleich und wird aktualisiert.

0
Alberto Piras