react-router upgrading conflict withRouter

2019-07-25 03:05发布

问题:

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)

回答1:

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)