34

I am implementing routing in react-application. I am confused between the advantage of react-router 4.0 over react-router-redux. I am also confused by react-router-dom.

What are the advantages and disadvantages of react-router-redux, react-router 4.0 and react-router-dom over each other?

vinzee
  • 10,965
  • 9
  • 34
  • 51
Gorakh Nath
  • 6,352
  • 11
  • 33
  • 58

3 Answers3

38

react-router v4 is base, building block. Provides API for creating routing solution.

react-router-dom is wrapper around react-router. It is supposed to be run in browser.

react-router-redux offers so called "controlled router", bound to redux store. State changes (navigation) could be controlled by dispatching redux actions as well as by clicking on links.

Your best bet is to start with react-router-dom (which pulls in react-router for you by default).

Andreyco
  • 20,909
  • 4
  • 54
  • 61
  • 2
    now my confusion is why I should use react-redux-router because by using react router 4.0 we can access the location and history information by using this.props.history. push('/') In which scenario it is mandatory to use react-redux-router? – Gorakh Nath Apr 03 '17 at 13:16
  • 1
    You absolutely don't have to use `react-router-redux`. It's completely optional. You don't have to use it even if you use `redux` for state management. – Andreyco Apr 03 '17 at 13:22
  • yes we are using redux for state management, then I think it is not required to use react-redux-router. Thanks – Gorakh Nath Apr 03 '17 at 13:27
  • But I think react-redux-router will be useful for maintaining the state in page refresh, if we are not using local storage. Am I right? – Gorakh Nath Apr 03 '17 at 13:42
  • In my experience, `react-router-redux` is "only" useful for managing location (push, goBack) as response to actions. You can read location state regardless. – Andreyco Apr 03 '17 at 17:39
  • I'm confused too. I agree with @jack123 for persistence consideration. Redux also allows Time Travel (https://medium.com/the-web-tub/time-travel-in-react-redux-apps-using-the-redux-devtools-5e94eba5e7c0). I'd rather stick to vanilla v4 in so far as Time Travel does not work out of the box in my dev tools :/ – Benjamin Toueg Dec 19 '17 at 18:04
28

Very very simple explanation!!!

  1. No need to use react-router directly.
  2. react-router-dom is made for "Web application" and react-router-native is made for "react native mobile apps".
  3. react-router-dom & react-router-native uses react-router at core.
  4. react-router-dom works perfectly fine with Redux, NO NEED of react-router-redux. (confirmed by Dan abramov - creator of Redux)
  5. Extra Benefit of react-router-redux is you can keep your router in sync with application state.
  6. In nutshell - history + store (redux) → react-router-redux
Vaibhav KB
  • 1,407
  • 15
  • 16
7
Lyubomir
  • 17,533
  • 4
  • 51
  • 65
  • 2
    Why we should use react-redux-router is it only for maintain the routing state in store but in react-router 4.0 we can access the routing information as a props, then what is the need of react-redux-router? – Gorakh Nath Apr 03 '17 at 13:19
  • no real need in my opinion, I don't use it. the router alone is powerful enough. – Lyubomir Apr 03 '17 at 13:20
  • that's what my confusion was because router alone is powerful so react-redux-router is not so useful if using redux for our state management. Thanks – Gorakh Nath Apr 03 '17 at 13:31