index index - 3 months ago 44
Javascript Question

react-router upgrading conflict withRouter

I've seen an upgrade guide here how to use

withRouter
but I have a problem implementing it on my project. It's having problem with my
connect
. When I have my
connect
above
withRouter
,
router
exists on props but not my states, and when I have
connect
below
withRouter
, states exist but not router.

Here's my code:

import React from 'react';

import { withRouter } from 'react-router';
import moment from 'moment';
import { connect } from 'react-redux';

export default class ThisComponent extends React.Component {
render() {
console.log(this.props)
return ...
}
});

export default connect(state => ({ oneState: state.oneState, twoState: state.twoState }))(ThisComponent)
export default withRouter(ThisComponent)

QoP QoP
Answer

Well you have 3 "export default" when you are supposed to have only one per file.

Your component should look like this

import React from 'react';

import { withRouter } from 'react-router';
import moment from 'moment';
import { connect } from 'react-redux';

class ThisComponent extends React.Component {
  render() {
    console.log(this.props)
    return ...
  }
});

ThisComponent = connect(state => ({ oneState: state.oneState, twoState: state.twoState }))(ThisComponent)
export default withRouter(ThisComponent)