Does the reactive router withRouter not support the details in mapStateToProps?

I am currently facing a strange problem where the HOC withRouterprovided react-routerdoes not pass the details to the mapStateToProps function. Am I doing it wrong here?

import React, { Component } from 'react';
import { Link, withRouter } from 'react-router';
import { connect } from 'react-redux';


class ThisClass extends Component {
    render() {
        console.log(this.props.router); // Returns object with router keys (params, router, go, routes, ...)
        // Render stuff
    }
}

const mapStateToProps = (state, props) => {
    console.log(state); // returns state of redux
    console.log(props); // returns empty object -> {}, how come this is empty?!

    return {
        consultations: patientThisClassSelector(state, props)
    };
}

export default connect(mapStateToProps)(withRouter(ThisClass));
+4
source share
2 answers

You need to enter the details of the router to which you connect to the component.

To achieve this, you must use

export default withRouter(connect(mapStateToProps)(ThisClass));

instead

export default connect(mapStateToProps)(withRouter(ThisClass));

+6
source

For me, I tried to get my original state object, because for this I used mapStateToProps for my child class. I use React-Redux and it works for me.

var connect = require('react-redux').connect;
var HeaderSection = React.createClass({
  render: function() {
   console.log(this.props);
  }
});

function mapStateToProps(state) {
  return state;
}

module.exports = connect(mapStateToProps)(HeaderSection);
0

Source: https://habr.com/ru/post/1673778/


All Articles