還元反応状態に応じて同じ反応ルータ経路で異なる反応成分をバインドする方法はありますか？

Question

React、ReduxとReact-routerを使用して、私はredux状態に応じて同じルートに異なるコンポーネントをバインドしたいと思います。例えば：ComponentAとComponentBを想定すると、

は、私は、これはルータの設定に/routes.js

<Route path="/" component={App}> 
    <Route path="/test" component={ComponentA} /> 
</Route> 

が、私の場合に反応が欲しい私はこのReduxの状態

{ 
    flag: true; 
} 

を持っていると仮定するとコンポーネント

に反応しています私のRedux状態にあるflagをfalseにしたい

... 
    <Route path="/test" component={ComponentB} /> 
... 

私はComponentAにラッパーコンポーネントを作成することができることを知っていますし、Reduxの状態をチェックして、対応するコンポーネントをレンダリングComponentBが、私は新しいコンポーネント

を作成する必要がない答えを探していました

Answer 1

routeのコンポーネントフィールドには、terinary演算子を使用できます。

<Route path="/test" component={flag ? ComponentA : ComponentB} /> 

編集：これは、状態から旗にマップする方法です。

import { connect } from 'react-redux'; 

// ... Component Definition 

const mapStateToProps = (state, ownProps) => { 
    return { 
    flag: state.flag 
    } 
} 

const mapDispatchToProps = (dispatch, ownProps) => { 
    return { 
    // Whatever you want to dispatch 
    } 
} 

const ConnectedComponent = connect(
    mapStateToProps, 
    mapDispatchToProps 
)(YourComponent) 

編集2：Provider

const Root = ({ store }) => (
    <Provider store={store}> 
    <Router> 
     <Route path="/" component={App} /> 
    </Router> 
    </Provider> 
)