web-dev-qa-db-ja.com

React-routerでブラウザの戻るボタンを傍受/処理しますか？

Material-uiのタブを使用しています。これらのタブは制御されており、次のような（React-router）リンクに使用しています。

    <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"/>} />

ダッシュボード/データを閲覧しているときにブラウザの戻るボタンをクリックすると、ダッシュボード/ユーザーに移動します（たとえば）

状態を設定することで変更できますが、ブラウザの戻るボタンが押されたときにイベントを処理する方法がわかりませんか？

私はこれを見つけました：

window.onpopstate = this.onBackButtonEvent;

ただし、これは状態が変更されるたびに呼び出されます（戻るボタンイベントだけでなく）

javascriptreactjsreact-routermaterial-ui
28
high incompetance

ここに私がそれをやった方法があります：

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

みんな助けてくれてありがとう

11
high incompetance

これは少し古い質問であり、おそらくあなたはすでにあなたの答えを持っていますが、これを必要としていた私のような人々のために、私はこの答えを残しています。

反応ルーターを使用すると、次のようにジョブが簡単になりました。

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();
}
21
Jay Shin

React Router APIのバージョン3.xには、 ユーティリティのセット があり、イベントがブラウザの履歴に登録される前に「戻る」ボタンイベントを公開できます。まず、コンポーネントを withRouter()高次コンポーネント でラップする必要があります。その後、setRouteLeaveHook()関数を使用できます。この関数は、有効なrouteプロパティとコールバック関数を持つpathオブジェクトを受け入れます。

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

履歴プロパティを取得し、componentDidMount（）メソッドを記述するために、router hocを使用しました。

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