は私のリアクト/ Reduxのベースのアプリケーションでは場所の変更

Question

を検出してから反応し、ルータを防ぐため、私はcombineReducers行うreducers/index.jsで

を次のようにログアウトを実装している、私はappReducerと呼ばれるアプリレベルの減速を作成しました。そこで私はLOGOUTの行動を確認してからundefinedを返します。

これはすべて正常に動作します。私がしたいのは、LOGOUTアクションの場合は、localStorageをクリアしてログインページにリダイレクトしたいということです。反応ルータを使用せずに、ネイティブブラウザの方法でリダイレクトする必要があることに注意してください。私がすればwindow.location = '/'。最初に反応ルータによって検出され、私は少しのためのログインページを参照し、それは少し奇妙である更新します。

反応ルータが場所の変更を通知されないようにする方法はありますか。

Answer 1

完全に防ぐことはできませんが、 history.listen機能へのアクセスで制御できます。

React-Router 4では、HOC withRouterを使用して最上位コンポーネントをラップすることができます。

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(App)); 

これはthis.props.historyにアクセスし、それを

class App extends Component { 
    constructor(props) { 
    super(props); 

    this.props.history.listen((location, action) => { 
     //here you can control the location change 
    }); 
    } 

    render() { 
    return (
     </div> 
    ); 
    } 
} 

を制御することができます。また、履歴オブジェクト上listenBeforeイベントがあり、ナビゲーションを制御するために、このイベントを使用して追加することができます独自のカスタムナビゲーションロジック：

history.listenBefore((location, done) => doSomething(location).then(done))