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

Question

私が制御されていると私は（リアクト-ルータ）のためにそれらを使用していた、素材-UIのタブを使用しています。このようなリンク：

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

私はcurrenlty来場ダッシュボード/データのだと私は、ブラウザのをクリックした場合戻るボタン ハイライトされたタブはダッシュボード/データ（値= 2）に残ります（ダッシュボード/ユーザーには）ブラウザの戻るボタンが押されたら？

私は、この発見しました：

window.onpopstate = this.onBackButtonEvent; 

をしかし、この状態が

ここ

Answer 1

は、私はそれをやってしまった方法です（だけでなく、バ​​ックボタンイベントに）変更されるたびに呼び出されます。

を

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

支援するためのおかげでみんなが笑

Answer 2

これは少し古い問題であり、あなたはおそらくalreadましたあなたの答えが得られましたが、これが必要な私のような人にとって、私はこの答えを残しています。反応-ルータを使用して

は、次のような仕事が簡単になる：

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

Answer 3

リアクトルーターAPIのバージョン3.xは、イベントはに登録する前に、「戻る」ボタンのイベントを公開するために使用することができますa set of utilitiesを持っていますブラウザの履歴。最初にコンポーネントをwithRouter() higher-order componentにラップする必要があります。有効なpathプロパティとコールバック関数を持つrouteオブジェクトを受け入れるsetRouteLeaveHook()関数を使用できます。

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