Source:  Twitter logo

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 ?

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

export default compose(
  withRouter,
  connect(mapStateToProps, mapDispatchToProps)
)(App);
63 users liked answer #0dislike answer #063
Wesley Amaro profile pic
Wesley Amaro

Could you refer to this https://reacttraining.com/react-router/core/api/withRouter, it clearly says that it doesn't work the other way around

12 users liked answer #1dislike answer #112
Aashish Karki profile pic
Aashish Karki

You can do it in two ways,

Proper Way:

withRouter(connect(mapStateToProps, mapDispatchToAction)(App));

with this, you will able to get withRouter props like history, match etc.. in mapStateToProps.

2nd way:

connect(mapStateToProps, mapDispatchToAction)(withRouter(App));

using this, you won't be able to get the withRouter props

8 users liked answer #2dislike answer #28
the_haystacker profile pic
the_haystacker

If someone still has the issue then plz follow this one

const ShowTheLocationWithRouter = withRouter(Login);

export default connect(mapStateToProps, mapDispatchToProps)(ShowTheLocationWithRouter);
6 users liked answer #3dislike answer #36
Nabnit Jha profile pic
Nabnit Jha

Copyright © 2022 QueryThreads

All content on Query Threads is licensed under the Creative Commons Attribution-ShareAlike 3.0 license (CC BY-SA 3.0).