Can't access context.router with react-router-redux

Question

I m currently using react-router-redux on a project and everything is working fine except for the fact that i can't figure out how to access the react-router router.

@connect((state, props) => {
    return  {
                notification:state.getIn(['_display', 'notification']),
                loadingScreen:state.getIn(['_display', 'loadingScreen']),
                route:props.location.pathname
            };
})
export default class Consultation extends React.Component {

    constructor(props,context) {
        super(props, context);
        console.log(context.router);
    }

    componentDidMount(){
        const { router } = this.context;
        .....
    }

    render(){
     ....
    }
}
Consultation.contextTypes = {
    router: React.PropTypes.object.isRequired,
    store:React.PropTypes.object
};

this.context.router is always undefined and i ve tried a lot of things unsuccessfully

i m using react 0.14.6, redux 3.0.2, react-router 2.0.0, react-router-redux 4.0.0

Is your `Consultation` component wrapped in Router component? — Andreyco, Apr 01 '16 at 07:57
yes, i have my Provider component at the top, then my Router component and finally my Consultation component — Hugo Martinez, Apr 01 '16 at 08:10
why do you want to access context.router? You can access the current router state via --> ownProps.location.query.filter and you can issue navigation events via --> store.dispatch(push('/your-route')) if you have the correct middleware setup --> routerMiddleware — deowk, Apr 01 '16 at 13:51
My problem is that i can't make routerWillLeave works, and i ve seen quite a few examples where they use the router to make the callback work. — Hugo Martinez, Apr 01 '16 at 14:21

score 2 · Accepted Answer · answered Apr 16 '16 at 02:11

You are putting .contextTypes on the component returned by connect() instead of your own component. This is why context isn’t made available to your component.

Try this instead:

class Consultation extends React.Component {
    constructor(props, context) {
        super(props, context);
        console.log(context.router);
    }

    componentDidMount(){
        const { router } = this.context;
        .....
    }

    render(){
     ....
    }
}
Consultation.contextTypes = {
    router: React.PropTypes.object.isRequired,
    store:React.PropTypes.object
}

export default connect(...)(Consultation)

Note that we first specify contextTypes, and export the connected component, rather than assign contextTypes to an already connected component which you get from the @connect decorator. By the way this is yet another reason to avoid decorators!

Thank you! At first i thought it wasn't the right answer cause i tried to use the ES7 static properties, but babel was basically doing what i was previously doing in my code so... I tried your solution and it worked :) Redux is amazing btw, thanks for that too :) — Hugo Martinez, Apr 21 '16 at 15:08
Correct me if I'm wrong here but alternatively you could `import { withRouter } from 'react-router'` and then have `Consultation = withRouter(Consultation)` before passing through to connect. This would make the router available at `props.router`. See docs here https://github.com/ReactTraining/react-router/blob/master/docs/API.md#withroutercomponent-options — Simon Watson, Nov 21 '16 at 10:05

Can't access context.router with react-router-redux

1 Answers1