反応ルータのルートの場所との同期還元店

Question

私はreact-router-reduxを使用しています。私のアプリのヘッダーを更新しようとしています。ルートが変更されたときはいつでも店舗からその状態を受け取ります（@@router/UPDATE_LOCATION両方持って

componentWillMount() { 
    this.props.appActions.setHeader('New Block') 
    } 

私は手動でルート/blocks/newにcomponentWillMountでヘッダーを設定し、それがルート「ブロック」の子である、：）

現在、私のようなcomponentWillMountでアクションを派遣しています別のヘッダー、私はhistoryに戻ったときに動作しません。なぜなら、thルートblocksのeコンポーネントが再度マウントされない場合は、まだがマウントされています。したがって、ヘッダはまだNew Blockです。そして、blocksがマウントされ、かつnewがまだ子としてアンマウントされていたときに、それ以前のヘッダが何であったかは分かりません。

（そして、私はそれから起こるようです何redux-devtools、と逆時間しようとすると、私は戻ってコンポーネントが再びマウントポイントに行くたびに、それは再び行動を派遣する、とdevtoolが届きます別のディスパッチ）

ルートは：

<Route path="begin" component={PlayerBeginContainer}> 
    <IndexRoute component={PlayerOverview}/> 
     <Route path="blocks" component={PlayerBlocks}> 
     <Route path="new" component={PlayerNewBlock}/> 
     </Route> 
</Route> 
... 

私は店を同期しようとしたときはいつでもルート変更、しかし：

if (action && action.type === UPDATE_LOCATION) { 
let path = action.payload.pathname.split('/') 
// Laboriously iterate through array to figure out what the new header state should be. 
    // i.e. if (1 in split && split[1] === 'routeName') 
    // or let lastPath = path[path.length - 1] 
    // and getting parentPath would require more checking of whether it is the parent itself or not etc. 
    // appHeader = 'routeHeader' 
    return Object.assign({}, state, { appHeader: appHeader}); 
} 

特定のサブルートでトリガする必要がある場合は、これは非常に面倒です。また、ルータに定義されているものの、別のネストされた構造を作ってはいけません。

ヘッダーでは、this.props.location.pathname以外は使用できません。どのルートを使用しているか把握することはできません。また、コンポーネント自身もヘッダー自体を設定する必要はありません（つまりcomponentWillMount）。

最後のオプションはルータonEnterを使用することですが、ルータをきれいに保ちたいと思いますが、おそらく私はこれを妥協する必要があります。

ここに何か不足していますか？またはこれで私を助けることができるいくつかの種類のlib？

TL：私がどこにいるか把握するためにlocation.pathnameを分解することなく、headerコンポーネントがどのルートにいるかを認識させるにはどうすればよいですか？

Answer 1

これは私のコードベースのコードです。このアプリでは、私はハッシュの歴史を使用しますが、私はあなたもother history objectsと同じことをすることができると思います。

import {hashHistory} from 'react-router'; 
import {syncHistoryWithStore} from 'react-router-redux'; 

const history = syncHistoryWithStore(hashHistory, store); 
history.listen(location => { 
    // here you can do something after location is updated 
}); 

<Router history={history}> 
.... 
</Router> 

、その後、あなたのコンポーネントにあなたがstate.routingからいくつかの情報を取得することができます。

function mapStateToProps(state) { 
    return { 
    current: state.routing.locationBeforeTransitions.pathname, 
    }; 
} 

export default connect(mapStateToProps)(App); 

これを行う、いくつかのコンポーネントからのルートを変更するには：

import {push} from 'react-router-redux'; 
this.props.dispatch(push('/route'));