React Router make back back forward

Question

要件： #infoルートをプッシュしてフルスクリーンオーバーレイコンポーネントを表示するボタンをクリックすると、モーダルを閉じるか、戻るボタンを押すと、前のページに移動するのではなく、オーバーレイを閉じる必要があります。

1ページ目、2ページ目。ボタンを押して、オーバーレイを表示します。戻るまたは閉じるオーバーレイは、オーバーレイを閉じてページ2に残ります。

問題：ページ2に戻ると、オーバーレイルートに移動するための転送履歴が残っています。

私は方法を探しており、転送履歴を削除するソリューションを見つけることができませんでした。

私のコードのようなある：オーバーレイが表示されている場合：

this.props.router.push(this.props.router.getCurrentLocation().pathname + '#info') 

そしてIはoverylayが閉じられたときGOBACKするコードを持っているかのボタンを背面押したとき：

onBackButtonEvent() { 
    if (this.props.renderOverlay) { 
    this.setState({ 
     overlayRoutePushed: false 
    }) 
    this.props.closeOverlay() 
    } 
} 

closeOverylayAndBack() { 
    this.setState({ 
    overlayRoutePushed: false 
    }) 
    this.props.closeOverlay() 
    this.props.router.goBack() 
} 

componentDidMount() { 
    window.onpopstate = this.onBackButtonEvent 
} 

検出するために戻るボタンとwindow.onpopstate私はルートをプッシュする必要があります。オーバーレイが表示されているときに#infoと置き換えて、戻ってきたときにオーバーレイを閉じるだけでしたが、route.goBack（）のデフォルトを防ぐことはできません。

アイデア？

Answer 1

私は前方防止または私の最後のリゾートでは、ハッシュを使用して削除し、私は戻って打ったとき、私は前方および非表示打つときだけオーバーレイを示すことであったように、前方の歴史を削除する方法を見つけることができませんでした：

this.props.router.push({ 
    pathname: this.props.router.getCurrentLocation().pathname, 
    state: {overlay: true} 
}) 

これは＃を削除するためのものですが、状態を変更しない場合は、実際にreplace（）を使用してonPopStateを処理させません。

それから私は、私は前後にポップときの状態が変更されたかどうかを確認します。

componentWillReceiveProps (nextProps) { 
    if (nextProps.router.location.state) { 
     if (nextProps.router.location.state.overlay) { 
      this.showOverylay() 
     } 
    } 
}