Zurück-Button des Browsers im React-Router abfangen/behandeln?

Ich verwende die Registerkarten von Material-ui, die gesteuert werden, und ich verwende sie für (React-Router) Links wie diese:

    <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 Dashboard/Daten besuche und auf die Zurück-Schaltfläche des Browsers klicke, gehe ich (zum Beispiel) zu Dashboard/Benutzer, aber die hervorgehobene Registerkarte bleibt immer noch auf Dashboard/Daten (Wert = 2).

Ich kann den Status ändern, indem ich den Status festlege, aber ich weiß nicht, wie ich mit dem Ereignis umgehen soll, wenn die Zurück-Schaltfläche des Browsers gedrückt wird.

Ich habe das gefunden:

window.onpopstate = this.onBackButtonEvent;

aber dies wird jedes Mal aufgerufen, wenn der Status geändert wird (nicht nur beim Zurück-Button-Ereignis)

Dies ist eine etwas alte Frage, und Sie haben Ihre Antwort wahrscheinlich bereits erhalten, aber für Leute wie mich, die diese benötigt haben, hinterlasse ich diese Antwort.

Die Verwendung von React-Router machte die Arbeit 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();
}

Mithilfe von Haken können Sie die Zurück- und Vorwärtstasten erkennen

import { useHistory } from 'react-router-dom'


const [ locationKeys, setLocationKeys ] = useState([])
const history = useHistory()

useEffect(() => {
  return history.listen(location => {
    if (history.action === 'PUSH') {
      setLocationKeys([ location.key ])
    }

    if (history.action === 'POP') {
      if (locationKeys[1] === location.key) {
        setLocationKeys(([ _, ...keys ]) => keys)

        // Handle forward event

      } else {
        setLocationKeys((keys) => [ location.key, ...keys ])

        // Handle back event

      }
    }
  })
}, [ locationKeys, ])

so habe ich es am Ende 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 die Hilfe lol

Hooks-Probe

const {history} = useRouter();
  useEffect(() => {
    return () => {
      // && history.location.pathname === "any specific path")
      if (history.action === "POP") {
        history.replace(history.location.pathname, /* the new state */);
      }
    };
  }, [history])

Ich verwende history.listen nicht, weil es den Status nicht beeinflusst

const disposeListener = history.listen(navData => {
        if (navData.pathname === "/props") {
            navData.state = /* the new state */;
        }
    });

Die meisten Antworten auf diese Frage verwenden entweder veraltete Versionen von React Router, verlassen sich auf weniger moderne Klassenkomponenten oder sind verwirrend; und keiner verwendet Typescript, was eine übliche Kombination ist. Hier ist eine Antwort mit Router v5, Funktionskomponenten und Typoskript:

// use destructuring to access the history property of the ReactComponentProps type
function MyComponent( { history }: ReactComponentProps) {

    // use useEffect to access lifecycle methods, as componentDidMount etc. are not available on function components.
    useEffect(() => {

        return () => {
            if (history.action === "POP") {
                // Code here will run when back button fires. Note that it's after the `return` for useEffect's callback; code before the return will fire after the page mounts, code after when it is about to unmount.
                }
           }
    })
}

Ein ausführlicheres Beispiel mit Erläuterungen finden Sie hier.

Version 3.x der React Router API hat eine Reihe von Dienstprogrammen Sie können verwenden, um ein “Zurück”-Schaltflächenereignis anzuzeigen, bevor das Ereignis im Verlauf des Browsers registriert wird. Sie müssen Ihre Komponente zuerst in die einschließen withRouter() Komponente höherer Ordnung. Sie können dann die verwenden setRouteLeaveHook() Funktion, die jede akzeptiert route Objekt mit einem gültigen path -Eigenschaft und eine Callback-Funktion.

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);

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

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