반응 라우터 경로 위치 (경로 변경시 업데이트 헤더)가있는 동기화 redux 저장소

Question

나는 react-router-redux을 사용하고 있으며 경로가 변경 될 때마다 가게에서 상태를 수신하는 앱의 헤더를 업데이트하려고합니다. (@@router/UPDATE_LOCATION 에서)

현재 내가 파견하고있어 조치만을 componentWillMount 같은 : 모두가 내가 수동으로 경로 /blocks/new에 componentWillMount에서 헤더를 설정하고 경로 '블록'의 자식

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

, 다른 헤더, 내가 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 : 내 header 구성 요소가 location.pathname을 분석하여 현재 위치를 파악할 필요없이 어떤 경로에 있는지 알 수 있습니까?

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