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").

javascriptreactjsreact-routermaterial-ui
16
high incompetance

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
high incompetance

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
    }
}
0
Irmantas Ramanauskas