javascript - connect and withRouter issue

Question

I am using Redux and React for my project. I have some Routes in App.js. I also use the connect function in react-redux in my project. To prevent update blocking issue, I usually wrapped my component in this way

withRouter(connect(mapStateToProps, mapDispatchToProps)(App)),

However, If I changed order of withRouter and connect it doesn't work:

connect(mapStateToProps, mapDispatchToProps)(withRouter(App))

I have console.log the props in App.js. It already receives location and history props. I am figuring out the theory behind why the order does matter ?

Answer 1

You can use it with the method compose from redux library.

export default compose(
  withRouter,
  connect(mapStateToProps, mapDispatchToProps)
)(App);