webentwicklung-frage-antwort-db.com.de

Browsertaste des Browsers im React-Router abfangen/bearbeiten?

Ich verwende Tabs von Material-ui, die kontrolliert werden, und verwende sie für (React-Router) -Links wie folgt:

    <Tab value={0} label="dashboard" containerElement={<Link to="/dashboard/home"/>}/>
    <Tab value={1} label="users" containerElement={<Link to="/dashboard/users"/>} />
  <Tab value={2} label="data" containerElement={<Link to="/dashboard/data"/>} />

Wenn ich gerade auf dem Dashboard/in den Daten bin und auf die Zurück-Schaltfläche des Browsers klicke Ich gehe zum Beispiel auf das Dashboard/die Benutzer, aber der hervorgehobene Tab bleibt im Dashboard/in den Daten (Wert = 2).

Ich kann den Status ändern, weiß aber nicht, wie das Ereignis behandelt werden soll, wenn die Zurück-Taste des Browsers gedrückt wird.

Ich habe das gefunden:

window.onpopstate = this.onBackButtonEvent;

dies wird jedoch jedes Mal aufgerufen, wenn der Status geändert wird (nicht nur beim Ereignis "Zurück").

16

ich habe es am Ende so gemacht:

componentDidMount() {
    this._isMounted = true;
    window.onpopstate = ()=> {
      if(this._isMounted) {
        const { hash } = location;
        if(hash.indexOf('home')>-1 && this.state.value!==0)
          this.setState({value: 0})
        if(hash.indexOf('users')>-1 && this.state.value!==1)
          this.setState({value: 1})
        if(hash.indexOf('data')>-1 && this.state.value!==2)
          this.setState({value: 2})
      }
    }
  }

danke an alle für lol

8

Dies ist eine etwas alte Frage und Sie haben wahrscheinlich bereits Ihre Antwort erhalten, aber für Leute wie mich, die dies brauchten, lasse ich diese Antwort.

Die Verwendung des Reakt-Routers machte den Job so einfach:

import { browserHistory } from 'react-router';

componentDidMount() {
    super.componentDidMount();

    this.onScrollNearBottom(this.scrollToLoad);

    this.backListener = browserHistory.listen(location => {
      if (location.action === "POP") {
        // Do your stuff
      }
    });
  }

componentWillUnmount() {
    super.componentWillUnmount();
    // Unbind listener
    this.backListener();
}
16
Jay Shin

Version 3.x der React Router API verfügt über eine Reihe von Dienstprogrammen , mit denen Sie ein Ereignis der Schaltfläche "Zurück" anzeigen können, bevor sich das Ereignis im Verlauf des Browsers registriert. Sie müssen Ihre Komponente zuerst in die withRouter()-Komponente höherer Ordnung einschließen . Sie können dann die Funktion setRouteLeaveHook() verwenden, die jedes route-Objekt mit einer gültigen path-Eigenschaft und einer Rückruffunktion akzeptiert.

import {Component} from 'react';
import {withRouter} from 'react-router';

class Foo extends Component {
  componentDidMount() {
    this.props.router.setRouteLeaveHook(this.props.route, this.routerWillLeave);
  }

  routerWillLeave(nextState) { // return false to block navigation, true to allow
    if (nextState.action === 'POP') {
      // handle "Back" button clicks here
    }
  }
}

export default withRouter(Foo);
5
brogrammer

Ich habe withrouter hoc verwendet, um die History-Prop zu erhalten und einfach eine Methode von componentDidMount () zu schreiben:

componentDidMount() {
    if (this.props.history.action === "POP") {
        // custom back button implementation
    }
}