2016-06-01 4 views
2

https://github.com/reactjs/react-router/blob/cbdc49442aba5cc6f225ff5546ac5f4a217fa4ec/upgrade-guides/v2.4.0.mdにあるドキュメントに従ってきましたが、新しいwithRouter上位コンポーネントを使用してthis.props.routerにアクセスするのは苦労しています。react-router-withRouterはthis.props.routerの結果が定義されていません

import React from 'react'; 
import {connect} from 'react-redux'; 
import {withRouter} from 'react-router'; 
import * as actionCreators from '../action_creators'; 

export const ComponentA = withRouter(React.createClass({ 
    componentDidMount() { 
    console.log(this.props.router); //returns undefined 
    }, 
    render() { 
    return (
     <div></div> 
    ); 
    } 
})); 

//map redux state to props 
function mapStateToProps(state) { 
    return { 
    views: state.main.get('views') 
    }; 
} 

export const ComponentAContainer = connect(
    mapStateToProps, 
    actionCreators 
)(ComponentA); 

残念ながらthis.props.routerは常にundefinedを返します。何らかの理由で、それはプロパティとして注入されていないようです。

addBranch: function() 
addProject: function() 
addView: function() 
castDeviceAvailable: function() 
castDeviceConnected: function() 
castDeviceDisconnected: function() 
castDeviceUnavailable: function() 
closeBurgerMenu: function() 
createProject: function() 
deleteBranch: function() 
deleteProject: function() 
deleteView: function() 
formValidation: function() 
getCastDeviceAuthToken: function() 
key: function(...) 
get key: function() 
loadView: function() 
navigateToSettings: function() 
newBuild: function() 
newBuildSummary: function() 
newCastDeviceAuthToken: function() 
openBurgerMenu: function() 
projectAdded: function() 
projectDeleted: function() 
projectUpdated: function() 
ref: function(...) 
get ref: function() 
router: undefined 
setBuildSummary: function() 
setLatestBuilds: function() 
setProjects: function() 
setState: function() 
setThemes: function() 
setViews: function() 
subscribeToView: function() 
toggleBurgerMenu: function() 
updateView: function() 
viewAdded: function() 
viewDeleted: function() 
viewUpdated: function() 
__proto__: Object 

任意の考え:

this.propsは次のようになりますか?

答えて

1

connectの代わりにラッピングを試しましたか?このように...

export const ComponentAContainer = withRouter(connect(
    mapStateToProps, 
    actionCreators 
)(ComponentA)); 

注:そうすることで、あなたも、あなたのクラス定義上withRouterラッパーを削除する必要があります。

関連する問題